小程序前身（wxjsdk）
image.png
app和h5做一些交互的时候
一般 native 开发者会在Webview里注入JSBridge，使得H5可以通过它调用到原生能力，相当于给is拓展一个API，就像浏览器给jsCore拓展了window,document一样
然后h5就可以
WeixinJSBridge.XXXX('imagePreview', {})
去掉用一些app提供的原生能力去交互了
微信推出了jssdk封装了内部使用的WeixinJSBridge，供外部使用
image.png
为啥说他小程序前身呢，本质上 技术/微信 也一直在提升h5的用户体验，比如RN致力解决这些问题
我对小程序的理解：把h5的开发代码加载到本地打开，而不是输入网址远程打开
生命周期
image.png
「挂起」状态：此时小程序的内存状态会被保留，但开发者代码执行会停止，事件和接口回调会在小程序再次进入「前台」时触发。
- onLaunch
- onShow
- onHide
- onLoad
- onShow
- onReady
- onHide
- onUnload
- created
- attached
- ready
- moved
- Detached
加载一个页面（包含组件）的加载顺序
- 首先执行
App.onLaunch->App.onShow - 其次执行
Component.created->Component.attached - 再执行
Page.onLoad->Page.onShow - 最后 执行
Component.ready->Page.onReady
架构图
image.png
渲染层（渲染我们写的带渲染语法的WXML和WXSS，用的webview渲染只是没有任何开发者js代码，并不是自己手写了一个v8）
- 1 video、input、map等等原生组件和Webview这些小程序自定义组件不在同一层级进行渲染，给设计分层了，导致我们用的时候原生组件会盖在其他组件上面，不过好像现在有解决方案了
逻辑层（运行我们写的可以调用setData等API的js代码）
- 逻辑模块通过数据去驱动dom，而不是通过js直接调用dom，小程序不允许操作dom，可能涉及一些安全问题，这就是为什么没法用this.data.xxxx改变响应数据的原因,但确实能改变逻辑层的值，无法响应上去而已
能力
mDNS
提供了局域网内查找设备，然后通过正常的http或者socket和设备互联交互。可能跟智能家居这些会有大用处
设置
能调起一些小程序的设置界面，授权的设置信息，订阅消息的设置信息
收货地址
能调起拿到微信里的收货地址
卡包
在小程序中领取/查看/使用公众号AppId创建的会员卡、票、券（含通用卡）、礼品卡
发票
拿到选择用户的发票（抬头）信息
生物认证
能够使用手机上录入的生物信息
微信运动
获取用户过去三十天微信运动步数，分享数据到微信运动
订阅消息
通过订阅消息来给用户发消息
收藏
小程序里直接收藏视频、文件等信息
微信红包
设计微信红包封面，供用户领取后发红包时使用
车牌号
查看用户微信上保存的车牌号
视频号
可直接打开抵达视频号主页、活动页，预约直播，打开视频号的直播、视频，获取视频号直播（预告）信息
微信群
可以获取到微信群聊场景下的小程序启动的一些信息
客服
可以打开微信里属于公司的客服，收发消息
手机信息
蓝牙、NFC、电量、IP地址、（弱）网络类型（变化）、系统随机数 拨号
Wi-Fi（打开、关闭、获取wifi列表、连接断开某个已知wifi）
日历（添加日历（重复）事件）
通讯录（获取拉起通讯录后的联系人信息、添加通讯录）
无障碍（检测是否开了无障碍）
粘贴板（读取和设置）
屏幕（设置常亮、获取设置亮度、监听截屏动作）
键盘（监听键盘高度变化、随时可以收起键盘、获取输入框的光标位置）
加速计（监听加速度，应该是摇一摇）
指南针（监听指南针数据变化）
设备方向（不止横竖屏）
陀螺仪（角速度传感器、用于游戏）
内存（监听内存不足告警）
震动（使手机发生短、长震动）
录音
操作一些简单的相机操作
扫码（调起客户端扫码界面进行扫码）
文件操作
吐槽
- 不能使用 less、scss 等预编译器
- 没有cookie
和vue写法的对比拾遗
数据绑定
<img :src="imgSrc"/>
<image src="{{imgSrc}}"></image>
列表渲染
<li v-for="item in items"> {{ item.message }} </li>
<text wx:for="{{items}}">{{item}}</text>
显示与隐藏元素
vue中，使用v-if 和v-show控制显示隐藏
小程序中，使用wx-if和hidden控制显示隐藏
事件处理
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button> //阻止事件冒泡
数据双向绑定
<input v-model="reason" /> // first
<input :value="reason" @input="reason=$event.target.value" /> // second
<input bindinput="bindReason" value='{{reason}}' />
Page({
data:{
reason:''
},
bindReason(e) {
this.setData({
reason: e.detail.value
})
}
})
取设值
this.reason
this.reason+=1
this.data.reason
this.setData({
reason: this.data.reason+=1
})
绑定事件时候的传值
<button @click="say('明天不上班')"></button>
<view bindtap='toApprove' data-id="{{11111}}"></view>
Page({
data:{ reason:'' },
toApprove(e) {
let id = e.currentTarget.dataset.id;
}
})
组件通信
<div @click="this.$emit('helloWorld')" :title="title"></div>
<bar :title="title" @helloWorld="helloWorld"></bar>
methods:{
helloWorld(e){
console.log(`我接收到子组件传递的事件了,${e} `)
}
}
通过this.$emit 触发父绑定事件曲线传值，props接收
<tab-bar currentpage="index" bind:myevent="toggleToast"></tab-bar>
<div bindtap='toApprove'></div>
properties: {
currentpage: String
},
methods:{
toApprove(e){
this.triggerEvent('myevent', 111111)
}
}
this.triggerEvent('myevent', myEventDetail)
通过properties来收，triggerEvent来发
ref
<bar ref="bar"></bar>
this.$ref.bar
<bar id="bar"></bar>
this.selectComponent('#id')
文件引用系统
import Bar from './bar.vue'
"usingComponents": {
"tab-bar": "../../components/tabBar/tabBar"
},
"pages":{
"pages/home/index"
}
网友评论