微信小程序开发小记

app.json 层级 npm i

工具选择小程序构建npm 启动
周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。

应用生命周期与页面生命周期

应用生命周期影响页面生命周期

应用生命周期

1、用户首次打开小程序，触发 onLaunch（全局只触发一次）。

2、小程序初始化完成后，触发onShow方法，监听小程序显示。

3、小程序从前台进入后台，触发 onHide方法。

4、小程序从后台进入前台显示，触发 onShow方法。

5、小程序后台运行一定时间，或系统资源占用过高，会被销毁。

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。需要注意的是：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

页面生命周期

1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。

2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。

3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。

4、当小程序后台运行或跳转到其他页面时，触发onHide方法。

5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。

6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload

wx.navigateTo跳转状态下，页面A和页面B的生命周期逻辑

1、进入A页面：A执行onLoad()-->onShow()-->onReady()；

2、A页面navigateTo B页面：A执行onHide()，B执行onLoad()-->onShow()-->onReady()；

3、B页面返回A页面：B执行onUnload()，A执行onShow()；

4、退出A页面：A执行onUnload()。

应用生命周期影响页面生命周期

1、小程序初始化完成后，页面首次加载触发onLoad，只会触发一次。

2、当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法。

3、当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法。

小程序事件

事件绑定：

//index.wxml
<view bindtap="fun">
123456789
</view>

//index.js
Page({
  fun:function(e){
   console.log("我是fun")
  }
})

绑定并阻止事件冒泡 catchtap： 通过自定义属性给事件函数传参：

/index.wxml
<view id="outer" catchtap="handleTap1" data-value="{{123}}">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" catchtap="handleTap3">
      inner view
    </view>
  </view>
</view>

//index.js
Page({
  handleTap1:function(){
    console.log("outer view")
  },
  handleTap2:function(){
    console.log(" middle  view")
  },
  handleTap3:function(){
    console.log("inner view")
  }
})

修改data的值，使用setData方法修改

分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
作用
对小程序进行较好的优化

优化小程序首次启动的加载时间
多人开发的过程中可以更好的解耦

分包后的项目构成
分包后的小程序由1个主包+多个分包组成

主包：启动界面或TabBar页面，以及所有分包都需要用到的公共资源
分包：只包含和当前分包有关的页面和私有资源
分包的体积限制
整个小程序所有分包体积不能大于16M（主包+分包）
单个分包/主包大小不能超过2M

在小程序启动时，默认会下载主包并启动主包内页面
tabBar页面需要放到主包中
当用户进入某个页面，客户端下载对应分包，下载完成后再展示
非tabBar页面可以按照功能的不同，划分为不同的分包
小程序打包原则
小程序会按照subPackages的配置进行分包，subPackages之外的目录将会被打包到主包中
主包也可以有自己的pages
tabBar页面必须在主包内
分包之间不能相互嵌套
引用原则
主包无法引用分包的私有资源
分包之间不能相互引用私有资源
分包可以引用主包内的公共资源
独立分包
独立分包本质也是分包，它特殊在可以独立于主包和其他分包而单独运行（独立于主包的分包）

它的好处在于，不依赖主包，可以提高页面启动速度

在配置层面，它和普通分包的区别仅仅是

为在分包的最后添加"independent":true属性

独立分包和普通分包以及主包之间的资源都是相互隔绝的

分包预下载
在进入小程序的某个页面时，框架自动预下载可以需要的分包，从而提升后序分包页面的启动速度

分包预下载的行为会在用于进入某一页面的时候进行

小程序支付
实现流程：

       1.小程序端准备需要唤起的页面。提供给客户端需要唤起的信息。如：路径、小程序APPID、小程序原始ID
       2.客户端实现APP唤起小程序功能。（参考地址：https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Launching_a_Mini_Program/Launching_a_Mini_Program.html）
       3.实现跳转到微信小程序后，客户端可以将业务参数带到小程序，小程序端接收参数。
       4.小程序端接收到参数，获取用户的openId,发起支付请求到后台，后台调用我们微信小程序接口
       （subOpenId对应的值为用户的openId），后台接口请求成功后，将miniPayRequest返回给小程序端。
       5.小程序端拿到miniPayRequest支付参数，通过wx.requestpayment方法调起支付。
       6.用户完成付款，点击小程序端返回APP按钮。
       (参考地址：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html)