Small micro-channel program start

Small micro-channel program

File

Small micro-channel application development documentation

Nature

What is so small micro-channel program in the end is? Is a native app or H5 application?

In simple terms, the applet is an application running environment is micro letter (App) process, using the technical part of H5

Contents Introduction

app.js boot files, start instance object generated app

Configuring Global app.json

app.json document

Note json can not write a comment

{
  "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": "日志"
      }
    ]
  }
}

tabs

Note pagePath must be present at the interface, or do not show

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  }

Configuration page

logs.json

Interface configuration is a single interface

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {},
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

page rendering data

data interface initialization data

  data: {
    name:'zx',
    num1:100,
    num2:200,
    bool:false,
    lis:[{name:'zx',love:'wl'},{name:'zx125',love:'wl125'}],
   }

Render

  <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

Applet host environment

We call micro-channel client applet to provide an environment for the host environment. With the ability to host an applet environment provides, you can complete many common page can not complete the function.

Bis threading model - rendering and logical layers

First, we take a brief run environment applets. Applet into the operating environment rendering and logical layers, which WXML WXSS templates and styles work in the rendering layer, JS script work at the logical level.

Rendering and logical layers are represented by the applet management two threads: the interface layer is rendered using a rendering WebView; JsCore thread runs using logical layer JS script. The presence of a plurality of small program interface, there is a plurality of threaded rendering WebView layer, these two threads will communicate via the micro-channel client (hereinafter also employed to represent Native refers WeChat client) do transit, logical layer network request Native also via forwarding the communication model shown in FIG applet.

A display interface process

Loaded virtual DOM rendering layer, logical layer data acquisition, merger and virtual DOM, and finally presented to the user

Data-driven

Small program is also based on data-driven, when the data changes, the value of the logical layer calculates the change, updates to the virtual dom, do not change the process virtual DOM

Life cycle

app life cycle

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 一致

Interface Lifecycle

Registration Interface

event

Event Description

A simple incident case

note:

The best use of this data acquisition currentTarget sure to get the data of the current label, but targent acquired data click on the tab

Events change data values

  jia:function(){
    var that=this
    that.setData({
      start:that.data.start+1
    })
  },

Event capture and bubbling

Rule: Event outside to inside, bubbling from the inside out, until the stop event, the event also prevent execution, execution is not behind

#事件捕获
capture-bind:tap=''

#事件冒泡
bindtap=''

#事件捕获
capture-catch:tap=''
catchtap=''

Package

Custom Components

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 }, {})

    }
  }
})
使用自定

Interface uses pass value +

<zx haha="wl" bind:tt1="jia"></zx> 也可以传参给组件{{data}}

Components event delivery

Routing Jump

routing

部分路由跳转可以传递参数，记得可以在声明周期函数获取传递的参数

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		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

全套

https://www.cnblogs.com/xiaoyuanqujing/p/11638060.html