微信小程序的个人理解
1. 微信小程序
微信小程序是一种运行在微信客户端,无需下载和安装,它由JavaScript+WXML+WXSS编写,类似于前端技术中的JavaScript+HTML+CSS;
page(object)是一个构造器,用该函数来注册页面,指定页面的生命周期,初始数据(data),事件处理回调。
优先级,先找到页面的配置page.json,如果没有找到,然后在外面配置的app.json中
全局配置
app.js 必须用app({})方法来调用属性、方法和事件,只能写一个。
app.json 可以配置选项卡、页面、设置入口页面、设置窗口的颜色、字、状态栏的颜色等等。
App() 用来注册一个小程序。在小程序启动的时候调用,并创建小程序,直到销毁,在小程序的整个生命周期过程中,他都是存在的,它是单例的全局的,所以只能在app.js中注册一次,在代码的任何地方都可以通过getApp()获取这个唯一的小程序实例。App()的参数是object类型的,指定了小程序的生命周期,
globalData对象 全局数据对象
Page()
通过App()注册完成的小程序之后,框架就在开始注册页面,所以不要在App()的onLaunch()中调用getCurrentPage()方法。同样Page()也是有生命周期的,当页面注册完成之后,可以在page.js文件中调用getCurrentPage()方法,获取当前页面对象。Page()的参数也是object类型的。
data 页面的初始化数据
Page.prototype.setData() Page的函数setData用于页面初始化数据data的修改,如果该数据绑定到视图层wxml中,那么无需刷新,视图层就会反映出修改,对于data的修改,只能使用setData(),不能直接通过this.data进行修改,数据量限制在1M以内。
getCurrentPages()获取当前页面栈的实例,以数组的形式按栈的形式给出,第一个元素为首页,最后一个元素为当前页面。
官方工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
简易教程:https://developers.weixin.qq.com/miniprogram/dev/
设计指南:https://developers.weixin.qq.com/miniprogram/design/index.html
运营规范:https://developers.weixin.qq.com/miniprogram/product/index.html
接入指南:https://developers.weixin.qq.com/miniprogram/introduction/index.html
支付文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1
客服消息:https://mp.weixin.qq.com/debug/wxadoc/introduction/custom.html?t=20161221
特殊业务所需资质材料:https://mp.weixin.qq.com/debug/wxadoc/product/material.html?t=201714
数据分析:https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201714
2. 微信小程序的生命周期
微信小程序的生命周期分为页面生命周期和应用生命周期
(1)应用生命周期的三个属性方法,onLaunch,onShow,onHide;
onLaunch 监听小程序的初始化,当小程序初始化完成时,会触发onLaunch,全局只触发一次;
onShow 监听小程序的显示,当小程序启动,从后台进入前台时,会触发onShow;
onHide 监听小程序的隐藏,当小程序从前台进入后台时,会触发onHide;
(2)页面生命周期:
onLoad:页面加载执行
onReady:页面渲染完成执行
onShow:页面显示执行
onHide:页面隐藏执行
onUlead:页面卸载执行
3. 微信小程序中的事件绑定
事件分为冒泡事件和非冒泡事件
冒泡事件是当一个组件上的事件触发后,该事件会传向父节点,而非冒泡事件不会。
4. 关于微信小程序的登录以及授权
小程序先调用wx.login()获取到用户对应的code(临时登录凭证),然后把code通过request请求发送给开发者服务器,然后开发者服务器用code向微信服务器换取用户唯一的OpenID和session_key(对用户数据进行加密签名的秘钥),然后开发者服务器生成一个3rd_session(用于开发者服务器和小程序之间做登录校验),然后以3rd_session为key,session_key和OpenID为value写入session存储,返回给小程序,小程序把3rd_session存储起来,后续用户再次进入小程序时,会调用wx.checksession()检验登录状态,如果失效,则重新发起登录。
部分接口需要用户授权同意后才能调用, wx.getSetting 获取用户当前的授权状态,判断scope.userInfo,若已经存在,则可以直接调用getuserinfo获取头像昵称,不会弹框。
获取手机号不能通过api来调用,需要通过button组件触发, 需要将button组件中的open-type设置为getgetPhoneNumber,当用户同意后,通过bindgetphonenumber事件回调到微信服务器返回加密数据,然后在开发者服务器结合session_key和app_id进行解密获取手机号。
5. 页面跳转,在微信小程序中,没有a标签,div标签,需要点击元素跳转有两种方法:
(1)在wxml页面中使用navigator标签,
例如:<navigator url= '../test/test',>,但是url中的地址必须在app.js页面中注册过才能使用。
(2)绑定bindtap事件,然后在点击的时候使用wx.navigator({ url: '../test/test',})跳转到相应的页面。
6. var that = this 改变this的作用域,例如
bindtap:function(){
var that = this ,
wx.getUserInfo({
this.xxx // 指向这个函数;
that.xxx //指向外部函数;
})
}
7. 微信小程序的数据绑定、条件渲染跟vue里的很像。
8. 关于布局
Flex布局
Flex容器属性
flex-dirction决定元素的排列方向
flex-wrap 决定元素如何换行
flex-flow flex-dirction和flex-wrap的简写
justify-content 元素在主轴上的对齐方式
align-items 元素在交叉轴的对齐方式
Flex容器内元素属性
flex-grow 当有多余空间时,元素的放大比例
flex-shrink 当空间不足时,元素的缩小比例
flex-basis 元素在主轴上占据的空间
flex 是grow、shrink、basis的缩写
oorder 定义元素的排列顺序
align-self 定义元素自身的对齐方式