小程序总结

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

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

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

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

前期工做准备：

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

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

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

五、上传时，项目的基本信息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）
解决方案：
一、添加启动页
二、在页面onLoad里判断app.js里拿到openid了吗，没拿到的话，传个回调方法给app.js，让他拿到以后执行这个回调方法
三、onLaunch用来获取用户信息，相关数据获取放到页面上

request异步，onload 和onshow？
业务场景：
每一个页面都有获取用户的登陆信息而调用接口进行操做，获取用户登陆信息这步可能涉及到调用接口，写在onload上，可能会致使onshow调用接口的方法还没来得及获取到用户信息就执行了，若是我把逻辑都写在onload上，后退到页面还要有部分数据要刷新状态。
方案：一、写在onShow中，登录后缓存登录状态，下次执行onShow时，判断一下登录状态（在缓存里面增长一个状态判断，若是以前执行过就再也不重复执行，没执行再进行执行）
二、首次加载的写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,
          })  
        }
    }    
})

详细：http://www.javashuo.com/article/p-mvavulpr-gh.html

登陆受权

新的受权需用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
    //处理相关受权成功数据处理
    }
}

外部连接跳转

添加外链连接须要到业务域名配置（业务域名目前仅支持本身已备案成功的域名）

关于审核

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