小型マイクロチャネルプログラム
ファイル
自然
とても小さいマイクロチャネルプログラムは、最終的には何ですか？ネイティブアプリまたはH5のアプリケーションですか？
簡単に言えば、アプレット、アプリケーションが実行されている環境では、H5の技術的な部分を使用して、マイクロ文字（APP）プロセスであり、
目次はじめに
app.jsブート・ファイルは、インスタンスオブジェクト生成されたアプリを起動します
グローバルapp.jsonの設定
注JSONはコメントを書くことができません
{
"pages":[
"pages/index/index",
"pages/logs/logs"
#可以直接修改配置会自动生成界面
"zx/zx/zx"
],
"window":{
#下拉 loading 的样式,但是要首先开启下拉
"backgroundTextStyle":"light",
#header头栏目的背景
"navigationBarBackgroundColor": "#fff",
#header头栏目的文字
"navigationBarTitleText": "WeChat",
#header头栏目的文字的颜色(只能设置黑色和白色文字)
"navigationBarTextStyle":"black"
}，
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}タブ
注pagePathは、界面に存在していなければならない、または表示されません。
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
設定ページ
logs.json
インターフェイスコンフィギュレーションは、単一のインタフェースであり、
{
"navigationBarTitleText": "查看启动日志",
"usingComponents": {},
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle": "black"
}ページのレンダリングデータ
初期化データインタフェースデータ
data: {
name:'zx',
num1:100,
num2:200,
bool:false,
lis:[{name:'zx',love:'wl'},{name:'zx125',love:'wl125'}],
}与えます
<view>{{name}}</view>
#可拼接
<view>{{num1}}+{{num2}}</view>
#可计算
<view>{{num1+num2}}</view>
#布尔的使用
<checkbox checked='{{bool}}'></checkbox>
#默认
#关于wx:key
#官方解释：当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排 序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
<view wx:for="{{lis}}" wx:key="{{index}}">
{{index}}-{{item.name}}-love-{{item.love}}
</view>
#自定义
<view wx:for="{{lis}}" wx:for-item='zx' wx:for-index='in' wx:key="{{index}}">
{{in}}-{{zx.name}}-love-{{zx.love}}
</view>
#无标签
<block wx:for="{{lis}}" wx:key="{{index}}">
{{index}}-{{item.name}}-love-{{item.love}}
</block>
####################结果
<view>zx</view>
<view>100+200</view>
<view>300</view>
<checkboxrole="checkbox"aria-disabled="false"aria-checked="false"></checkbox>
<view> 0-zx-love-wl </view>
<view> 1-zx125-love-wl125 </view>
<view> 0-zx-love-wl </view>
<view> 1-zx125-love-wl125 </view>
0-zx-love-wl 1-zx125-love-wl125アプレットホスト環境
私たちは、ホスト環境のための環境を提供するために、マイクロチャネルクライアントアプレットを呼び出します。アプレット環境を提供してホストする機能を使用すると、機能を完了することができない多くの一般的なページを完了することができます。
ビススレッドモデル - レンダリングおよび論理層
まず、簡単な実行環境アプレットを取ります。論理レベルで動作環境のレンダリングと論理層、レンダリング層におけるWXML WXSSテンプレートやスタイルの仕事、JSスクリプトの仕事へのアプレット。
レンダリングと論理層は、アプレット管理二つのスレッドによって表される：界面層は、レンダリングのWebViewを使用してレンダリングされ、論理層JSのスクリプトを使用してJsCoreスレッドの実行を。小さなプログラムインタフェースが複数存在、ねじレンダリングWebViewの層が複数存在し、これら2つのスレッドがマイクロチャネルクライアントを介して通信することになる（以下、ネイティブ微信クライアントを指す表すために用いられる）輸送を行う、論理層ネットワーク要求図アプレットに示した通信モデルの転送を介して、ネイティブ。
ディスプレイインタフェース処理
ロードされた仮想層、論理層データの取得、合併および仮想DOMをレンダリングDOM、そして最終的にユーザに提示
データドリブン
小さなプログラムは、データ駆動型、データの変更、論理層の値が変更を計算し、仮想DOMへの更新に基づいており、プロセスの仮想DOMを変更しないでください
ライフサイクル
App({
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
globalData: 'I am global data'
})
onLaunch(Object object)
小程序初始化完成时触发，全局只触发一次。参数也可以使用 wx.getLaunchOptionsSync 获取。
参数：与 wx.getLaunchOptionsSync 一致
onShow(Object object)
小程序启动，或从后台进入前台显示时触发。也可以使用 wx.onAppShow 绑定监听。
参数：与 wx.onAppShow 一致
onHide()
小程序从前台进入后台时触发。也可以使用 wx.onAppHide 绑定监听。
onError(String error)
小程序发生脚本错误或 API 调用报错时触发。也可以使用 wx.onError 绑定监听。
参数：与 wx.onError 一致
onPageNotFound(Object object)
基础库 1.9.90 开始支持，低版本需做兼容处理。
小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听。注意事项请参考 wx.onPageNotFound。
参数：与 wx.onPageNotFound 一致インターフェイスのライフサイクル
イベント
単純な入射ケース
注意：
このデータ収集の最適な使用は、現在のラベルのデータを取得するには、currentTarget必ず、しかしtargent取得したデータは、タブをクリックしてください
イベントは、データ値を変更します
jia:function(){
var that=this
that.setData({
start:that.data.start+1
})
},イベントのキャプチャおよびバブリング
ルール：内側へのイベントの外側を、内側から出てバブリングは、停止イベントまで、イベントは、実行を防ぐため、実行は背後ではありません
#事件捕获
capture-bind:tap=''
#事件冒泡
bindtap=''
#事件捕获
capture-catch:tap=''
catchtap=''パッケージ
1.json
{
"component": true
}2.wxml
<view class='inner'>子组件{{haha}}</view>3.js
Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
inner: {
type: String,
//默认值
value: 'default value',
}
},
data: {
//这里直接赋值的话，界面是无法传值改变的
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
jia:function(e){
console.log(e)
//组件事件传递,界面绑定tt1，第二为传递参数，值在界面函数的e.detail
this.triggerEvent("tt1", { age:e.currentTarget.dataset.age }, {})
}
}
})
使用自定インターフェイスの用途は+値を渡します
<zx haha="wl" bind:tt1="jia"></zx> 也可以传参给组件{{data}}コンポーネントのイベント配信
ルーティングジャンプ
部分路由跳转可以传递参数，记得可以在声明周期函数获取传递的参数
| 路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
|---|---|---|---|
| 初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
| 打开新页面 | 调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/>保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层 |
onHide | onLoad, onShow |
| 页面重定向 | 调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/>关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 |
onUnload | onLoad, onShow |
| 页面返回 | 调用 API wx.navigateBack 使用组件<navigator open-type="navigateBack"> 用户按左上角返回按钮 |
onUnload | onShow |
| Tab 切换 | 调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
各种情况请参考下表 | |
| 重启动 | 调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/>关闭所有页面，打开到应用内的某个页面 |
onUnload | onLoad, onShow |
数据缓存
缓存：注意有同步异步之分，一般使用同步
单个Key允许存储最大数据为1MB，所有上限为10MB
存
wx.setStorage({
key:"key",
data:"value"
})
try {
wx.setStorageSync('key', 'value')
} catch (e) { }取
wx.getStorage({
key: 'key',
success (res) {
console.log(res.data)
}
})
try {
var value = wx.getStorageSync('key')
if (value) {
// Do something with return value
}
} catch (e) {
// Do something when catch error
}删
wx.removeStorage({
key: 'key',
success (res) {
console.log(res)
}
})
try {
wx.removeStorageSync('key')
} catch (e) {
// Do something when catch error
}网络请求
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})参考链接
小程序和app和h5的区别
https://blog.csdn.net/freekiteyu/article/details/84316183
全套