手把手教你写一个微信小程序(推荐)


Posted in Javascript onOctober 17, 2018

需求

小程序语音识别,全景图片观看,登录授权,获取个人基本信息

一:基础框架

官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了)

手把手教你写一个微信小程序(推荐)

1.跟着官方文档一步一步来,新建一个小程序项目就好

2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的

 app.json 是当前小程序的全局配置

小程序的所有页面路径、界面表现、网络超时时间、底部 tab

需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,切换页面

在app.json 文件中添加下面的代码就可以了

还有哦,一定要配置pagepath(页面路径)

"tabBar": {
  "color": "#cacaca",
  "selectedColor": "#f40",
  "borderStyle": "#fff",
  "backgroundColor": "#ffffff",
  "list": [
   {
    "pagePath": "pages/index/index",
    "text": "VR图片",
    "iconPath": "image/home.png",
    "selectedIconPath": "image/home_hover.png"
   },
   {
    "pagePath": "pages/voice/voice",
    "iconPath": "image/question.png",
    "selectedIconPath": "image/question_hover.png",
    "text": "VR语音"
   },
   {
    "pagePath": "pages/me/me",
    "iconPath": "image/mytb.png",
    "selectedIconPath": "image/mytb_hover.png",
    "text": "你的VR世界"
   }
  ]
 }

效果图:

手把手教你写一个微信小程序(推荐)

需求二:看见别人家的小程序,顶部可以自定义颜色

如图:

手把手教你写一个微信小程序(推荐)

好说,好说

同样在app.json 中插入一下代码,颜色自定义啦~

"window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#458af1",
  "navigationBarTitleText": "VR世界",
  "navigationBarTextStyle": "black",
  "enablePullDownRefresh": true
 },

总结app.json 配置,直接参考官方文档中的app.json 所有配置,一般需求都可以满足

贴心的贴上官方链接:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

手把手教你写一个微信小程序(推荐)

需求三:开发小程序,一般要用户授权登录,然后获取用户的基本信息,个人页面

如图:

手把手教你写一个微信小程序(推荐)

1.官方api 地址:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

2.找到登录接口

//app.js
App({
 onLaunch: function () {
  // 展示本地存储能力
  var logs = wx.getStorageSync('logs') || []
  logs.unshift(Date.now())
  wx.setStorageSync('logs', logs)
  // 登录
  wx.login({
   success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
   }
  })
  // 获取用户信息
  wx.getSetting({
   success: res => {
    if (res.authSetting['scope.userInfo']) {
     // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
     wx.getUserInfo({
      success: res => {
       // 可以将 res 发送给后台解码出 unionId
       this.globalData.userInfo = res.userInfo
       // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
       // 所以此处加入 callback 以防止这种情况
       if (this.userInfoReadyCallback) {
        this.userInfoReadyCallback(res)
       }
      }
     })
    }
   }
  })
 },
 globalData: {
  userInfo: null
 }
})

需求三:小程序有哪些组件可用呢

其实小程序的这一套框架,跟vue 很像,上手很容易

1.帖心的放上链接:https://developers.weixin.qq.com/miniprogram/dev/component/
2.官方支持的组件

手把手教你写一个微信小程序(推荐)如何使用,举栗子,使用swiper 

3.如何使用,举栗子,使用swiper 轮播

<swiper indicator-dots="{{indicatorDots}}"
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
 <block wx:for="{{imgUrls}}">
  <swiper-item>
   <image src="{{item}}" class="slide-image" width="355" height="150"/>
  </swiper-item>
 </block>
</swiper>

效果图:

手把手教你写一个微信小程序(推荐)

总结:小程序的接班框架就搭好了,需要什么就在里面添加就好了 如果你完全是新手,不是前端开发者,要先去了解一下

4.要遵循小程序的规则,模板语言,数据绑定,组件使用,传参,路由这些

5.

手把手教你写一个微信小程序(推荐)

总结

以上所述是小编给大家分享的手把手教你写一个微信小程序,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
浅谈js数组和splice的用法
Dec 04 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
jQuery实现滚动效果
Nov 17 jQuery
微信小程序block的使用教程
Apr 01 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
微信小程序开发之tabbar图标和颜色的实现
Oct 17 #Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 #Javascript
vue实现循环切换动画
Oct 17 #Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
You might like
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
jQuery 入门讲解1
2009/04/15 Javascript
解决js下referer兼容各大浏览器的方法
2014/11/03 Javascript
Javascript将JSON日期格式化
2016/08/23 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
mac下的nodejs环境安装的步骤
2017/05/24 NodeJs
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python 过滤字符串的技巧,map与itertools.imap
2008/09/06 Python
python定时采集摄像头图像上传ftp服务器功能实现
2013/12/23 Python
Django实现组合搜索的方法示例
2018/01/23 Python
python简单贪吃蛇开发
2019/01/28 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
详解python3类型注释annotations实用案例
2021/01/20 Python
开发人员所需要知道的HTML5性能分析面面观
2012/07/05 HTML / CSS
英国领先的葡萄酒专家:Majestic Wine
2017/05/30 全球购物
一道Delphi面试题
2016/10/28 面试题
学生个人的自我评价分享
2013/11/05 职场文书
老公保证书
2015/01/17 职场文书
离婚协议书范本(2016最新版)
2016/03/18 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python
Python使用openpyxl批量处理数据
2021/06/23 Python
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS