小程序总结

小程序的文档分为 简易教程、框架、组件、API 、工具
https://developers.weixin.qq....

• 简易教程---介绍小程序开发的一些基本情况 开发方式，项目目录等等，看完这些，基本能了解怎么跑起来项目，在哪块写代码，各个文件的作用。
• 框架--- 这部分是小程序开发的核心，小程序采用视图和逻辑层代码相分离的结构。
• 组件---小程序的每个标签相当于一个组件，官方已经预定义了一些常用的标签组件，能够满足日常基本功能的使用，这部分分时小程序开发高效的一个原因，基础的组件都定义好，需要用就行。这部分的文档，只要过一下，大概有那些组件，用的时候再仔细阅读文档。
• API---主要，可以的调起微信提供的能力，如果你在前端开发中没有遇到过的功能，都能在这里查到，比如小程序的头部，页面的刷新，本地存储，获取用户信息等。
• 工具--- 微信开发开始还是用微信自己的开发工具比较方便。

微信开发者工具不足，主要在几方面：

• 编写不便，没有智能输入
• 模拟器与真机表现不一致。主要是微信版本兼容性，例如低版本微信video层级处于置顶位置；

前期工作准备：

1、申请开发者账号，完善信息，开发者资质认证
2、配置接口服务器域名及业务域名

3、不是使用本地接口时代理配置需使用系统代理，以防真机出现接口访问不到

4、记得勾选不校验合法域名，接口访问问题

5、上传时，项目的基本信息APPID需要是管理者APPID，代码才可以上传，上传成功即可在微信公众平台-管理-版本管理-开发版本看到提交信息，可在成员管理添加体验者；

项目结构

常用组件

*   视图容器    view  scroll-view  swiper
*   基础内容  text
*   媒体    image  video audio
*   表单   button input checkbox  label picker 
*   画布  canvas 
*   地图  map

常用语法

数据绑定

<view> {{ message }} </view>
Page({
  data: {
    message: 'Hello MINA!'
  }
})

列表渲染
   

<view class="unit" wx:for="{{courseList}}" wx:key="{{item.id}}" id="{{item.id}}">
   <image class="thumb-img" mode="aspectFill" lazy-load="true" src="{{item.titleImg}}" />
   <text class="title">{{item.title}}</text>
</view> 

 列表中的wx:key 是一个比较令人迷惑的地方 ，不写会报错，但是随便给一个字符也不合理，最好是循环中的一个标记唯一性的键值，比如id

条件渲染

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

事件绑定

<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
Page({
    tapName: function(event) {
        console.log(event)
    }
})

  小程序的事件绑定，写法上有些区别，主要2种 bind:youevent="eventhandle"  catch:youevent="eventhandle" catch 能阻止事件冒泡

模块开发

小程序可以使用common.js 的模块开发方式。moudle.exports /exports 导出模块， require (‘file.js’) 的方式引入模块

页面的生命周期

App({
  onLaunch: function(options) {},//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  onLoad: function(options) {},//监听页面加载（可以在这里异步的请求数据，初始化页面）
  onShow: function(options) {},//监听页面显示
  onHide: function() {},//监听页面隐藏
  onReady: function(options) {},//监听页面初次渲染完成
  onUnload: function() {},//监听页面卸载
  onError: function(msg) {},//监听页面报错
  globalData: 'I am global data'
})

request异步，app.js的onLaunch和page的onLoad？
onLaunch和onLoad是异步的，各执行各的，里面的代码，谁先谁后，完全不可知。onLaunch是只有冷启动时候才会被再执行的 其它时候是不会被执行的 ；
业务场景：
在onLaunch一般用来获取用户信息的 而在page.js的onLoad也要拿着这个信息去后台获取数据，这个时候就获取不到了~
onLaunch 调用 wx.redirectTo 没有效果是因为这个时候页面还没注册（页面跳转尽量不放在onLaunch）
解决方案：
1、添加启动页
2、在页面onLoad里判断app.js里拿到openid了吗，没拿到的话，传个回调方法给app.js，让他拿到之后执行这个回调方法
3、onLaunch用来获取用户信息，相关数据获取放到页面上

request异步，onload 和onshow？
业务场景：
每个页面都有获取用户的登录信息而调用接口进行操作，获取用户登录信息这步可能涉及到调用接口，写在onload上，可能会导致onshow调用接口的方法还没来得及获取到用户信息就执行了，如果我把逻辑都写在onload上，后退到页面还要有部分数据要刷新状态。
方案：1、写在onShow中，登陆后缓存登陆状态，下次执行onShow时，判断一下登陆状态（在缓存里面增加一个状态判断，如果之前执行过就不再重复执行，没执行再进行执行）
2、首次加载的写onLoad，需要即时刷新的在onShow里面加this.onLoad()

小程序如何获取用户openid和unionId

注：没有在微信开放平台做开发者资质认证的就不要浪费时间了，没认证无法获取unionId，认证费用300元/年，emmmm....

流程
第一步：wx.login获取 用户临时登录凭证code
第三步：把步骤一code、appid传到开发者自己服务端
第三步：服务端结合code、appid、secret进行解密获取openid、unionId

wx.login({
      success: res => {
        if (res.code) {
          // 发送 res.code 到后台换取 openId, unionId
          WXAPI.jsCodeLogin({
            'appId': 'wxf346fd2ae233a0fc',（开发者APPID）
            'code': res.code
          }).then(function(res) {
          //res.data.openId,
          //res.data.unionId,
          })  
        }
    }    
})  

详细：https://segmentfault.com/a/1190000016497722

登录授权

新的授权需用button组件调用getUserInfo，所以在这之前无法调用wx.login，但是如果先调用获取用户信息再调用wx.login的话，解密过程会出错。

解决办法：
在页面的onLoad生命周期里调用wx.login，获取的code存入data以备需要的时候使用，但是code失效时间为5分钟，如果用户停留页面时间过长后点击授权登录，此时的code已经过期了，所以，获取code的函数应该每4分钟左右调用一次

wxml按钮授权：

<button open-type='getUserInfo' bindgetuserinfo="getUserInfo">授权登录</button>

onLoad: function (options) {
    this.getCodeTimer()
},
getCodeTimer () {
    wx.login({
      success: res => {
    WXAPI.jsCodeLogin({
            'appId': 'wxf346fd2ae233a0fc',（开发者APPID）
            'code': res.code
          }).then(function(res) {
          //res.data.openId,
          //res.data.unionId,
          }) 
        setTimeout(() => {
          this.getCodeTimer()
        }, 4 * 60 * 1000)
      }
})
// 授权登录
getUserInfo: function(e) {
    if (e.detail.errMsg === 'getUserInfo:fail auth deny') { //拒绝
    console.log('用户拒绝授权')
    } else if (e.detail.errMsg === 'getUserInfo:ok') { //允许
    //e.detail.userInfo
    //处理相关授权成功数据处理
    }
}

外部链接跳转

添加外链链接需要到业务域名配置（业务域名目前仅支持自己已备案成功的域名）

关于审核

小程序审核不是一帆风顺，主要还是服务类目选择的问题，像博客这种应该选择教育>教育信息服务这类；视频类还需上传相关许可证。