小程序开发指南

小程序介绍与开发环境
    小程序运行环境


        
小程序代码组成
    JSON配置
    WXML模板
        逻辑语法
            wx:if="{{条件}}"
            wx:elif="{{条件}}"
            wx:else="{{条件}}"
            wx:for="{{array}}" 
            wx:key
            wx:for-index
            wx:for-item
        模板
            <template name=""></template>
            <template is=""> </template>
            <import src=""/>
                import 不会递归调用
        共同属性
            id、 class、 style、 hidden、 data-*
    WXSS样式
    Javascript脚本
        模块化
            module.exports = function () {}
            var common = require('common.js')
        脚本执行顺序
        作用域
理解小程序的宿主环境
    逻辑层和渲染层
        通信模型
    程序与页面
        程序
            程序构造器APP()
                onLaunch
                    小程序初始化完成, 全局知触发一次
                onShow
                    当小程序启动, 或从后台进入前台显示
                onHide
                    当小程序从前台进入后台
                onError
                    当小程序发生脚本错误, 或api调用失败
                其他字段
                    Object参数
            程序的生命周期
                onLaunch
                onHide
                onShow
            小程序全局函数
        页面
            页面构造器Page()
                data
                    页面初始数据
                onLoad
                    生命周期函数, 监听页面加载, 触发时机早于onShow和onReady
                onReady
                    生命周期函数 监听页面初次渲染完成
                onShow
                    生命周期函数 监听页面显示 触发事件早于onReady
                onHide
                    生命周期函数 监听页面隐藏
                onUnload
                    生命周期函数 监听页面卸载
                onPullDownRefresh
                    监听用户下拉动作
                onReachBottom
                    页面上拉触发事件
                onShareAppMessage
                    用户点击右上角转发
                onPageScroll
                    页面滚动触发事件处理函数
                其他
            生命周期和打开参数
            页面的数据
                直接修改Page实例的this.data而不调用this.setData是无法改变页面状态的, 还会造成数据不一致
                由于setData是需要两个线程的一些通信消耗, 每次设置的数据不应该超过1024kb
                不要把data中的任意一项value设为undefined 否则可能会有不可预料的bug
            页面用户行为
                下拉刷新
                上拉触底
                页面滚动
                用户转发
            页面和路由
                wx.navigateTo
                    推入一个新的页面 页面栈会多一个页面 10层后没法推入
                wx.navigateBack
                    从页面栈中退出当前页面 页面栈会少一个页面
                wx.redirectTo
                    从页面栈中替换当前页面, 页面栈数量不变
                wx.switchTab
                    原来的页面栈会被清空 除了生命为Tabbar页面, 其他页面都会被销毁
                wx.reLaunch({url: "pageH"})
                    重启小程序并且打开pageH
                补充一下
                    wx.navigateTo 和wx.redirectTo只能打开非TabBar页面
                    wx.switchTab是能打开tabBar页面
    组件
    api
    事件
        常见的事件类型
            touchstart
                手指触摸动作开始
            touchmove
                手指触摸后移动
            touchcancel
                手指触摸动作被打断, 如来电提醒, 弹窗
            touchend
                手指触摸动作结束
            tap
                手指触摸后马上离开
            longpress
                手指触摸后超过350ms在离开, 如果制定了事件回调函数, tap事件将不被触发
            longtap
                手指触摸后 超过350ms在离开 推荐使用longpress事件代替
            transionend
                会在一个WXSSteansition或wx.createAnimation动画结束后触发
            animationstart
                会在一个WXSS animation动画开始时触发
            animationiteration
                会在一个WXSS animation一次迭代时触发
            animationend
                会在一个WXSS animation动画完成时触发
    事件绑定与冒泡捕获
        key以bind或catch开头然后跟上事件类型
        capture-bind
            表示事件捕获阶段
        bind
            表示事件冒泡阶段
        bind事件绑定不会阻止冒泡事件向上冒泡
        catch事件绑定可以阻止冒泡事件向上冒泡
底层框架
    双线程模型
        为什么选用双线程
    管控与安全
        措施
            提供一个沙箱环境来运行开发者的javascript代码, 这个沙箱环境不能有任何浏览器相关的接口, 只提供纯javascript的解释环境
    天生延时
        小程序延时
        小程序与原生交互延时
    组件系统
        exparser框架
            基于shadow DOM模型
            可在纯js环境中运行, 这意味着逻辑层也具有一定的组件树的组织能力
            高效轻量
                性能表现好 在组件实例极多的环境下表现尤其优异, 同时代码尺寸也较小
    自定义组件
        运行原理
        初始化页面时, exparser会创建出页面的跟组件的一个实例, 用到其他组件会响应穿件组件实例 这是一个递归过程
            根据组件注册信息, 从组件原型上创建出组件节点的JS对象 即组建的this
            将组件注册信息中的data复制一份 作为组件数据, 即this.data
            将这份数据结合WXML 据此创建出shadow tree 由于shadow tree中可能引用其他组件, 因此会递归触发其他组件的创建过程
            将shadowtree拼接到composedtree 上, 并生成一些缓存数据用于组件更新性能
            触发组件的created生命周期行数

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值