微信小程序的个人理解

2018-11-23  本文已影响0人  eveseven

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 定义元素自身的对齐方式

上一篇下一篇

猜你喜欢

热点阅读