微信小程序的个人理解

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容