Getting started with small micro letter to explain

Small micro-channel program

registered

• Due to restrictions issued a document, your own to the micro-channel public platform registration

Project structure

• 
• 
• project.config.json profile (no action)
• App.json (user configurable)
  • Routing pages
  • the entire program window style
  • tabar bottom set
  • .....
• app.js entry program
• 

xxx.js

• app.js is the entry procedure, on behalf of the application to do
• By switching to the routing index.js
• Page(options)
  • data part of the data page
    • this.data.xxx
  • onLoad: obtaining routing parameters, onLoad (options.xxx)
  • onReady: change the page data, such as change title
  • onShow: trigger several times, when switching pages
  • onHide: trigger several times
• data initialization data
• onReady modify data
  • this.setData({ msg:'xxx'})
  • Revise and update the view

Common Components

• view view
• text text box
• picker selection list
• input component (can not use the font-family)
  • By bind events (all lowercase), to bind function corresponds js declared, assign the assigned function reference
  • input bindblur="函数名"
  • Inside the function, the object receiving e
    • e.detail.value acquisition value value
    • e.target.id element id
    • e.target.dataset acquire property on the element data-xxx

wx instruction

• wx-xxx in the page
• wx: if = "" is displayed
• wx:for=""
• wx: for = "{{}} Array"
  • Elements: {{item}} {{index}} Index
• Conditions wx: if = "{{}} Boolean" adjacent wx: elif = "{{}} Boolean" adjacent wx: else

event

• change change event
• tap click event
• bindblur defocus
• Enter bindconfirm
• bindinput Type
• checkbox-group package checkbox is an array obtained detail.value
• Forms
  • button的formType
    • submit
    • reset

Send request

• wx.request( options)
  • url
    • success
    • fail
    • complete

The introduction of resource

html import

<include src=""/>

js import

<wxs src="./../test/test.wxs" module="test"/> 相对路径

<view>

  {{test.name}}

</view>

Import css @import "common.wxss";

Route parameters:

onLoad: function(option){
    console.log(option.query)
  }    

• Picture Preview wx.preview
• Local storage wx.setStorageSync

Pull up down

• Operating pullup and pulldown need to trigger must js file, declare that the corresponding callback function
  • Pull-down function onPullDownRefresh -> need to configure xxx.json
    • enablePullDownRefresh:true
  • Pull-bottomed onReachBottom
  • Stop function wx.stopPullDownRefresh pull-down ()
• Above function can be configured to automatically output by Page editor, single-page reference configuration window properties

navigation

• url=page
• open-type:
  • Default: navigateTo: non tabBar page.
  • switchTab tabBar page.
  • navigateBack return
  • reLaunch run
• Programming Navigation: wx api global object provides a value corresponding to the open-type
  • wx.switchTab || navigateTo note the distinction between non-tabbar

tabs

• color selectedColor set for the whole tabbar
• iconPath selectedIconPath provided separately for each different

• Interesting feature

  • Play music download

    - ```js
      const innerAudioContext = wx.createInnerAudioContext()
            innerAudioContext.autoplay = true
            innerAudioContext.src = res.tempFilePath
            innerAudioContext.onPlay(() => {
              console.log('开始播放')
            })
            innerAudioContext.onError((res) => {
              console.log(res.errMsg)
              console.log(res.errCode)
            })
      ```

• Barrage

    - ```html
      <view class="section tc">
        <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"   enable-danmu danmu-btn controls></video>
        <view class="btn-area">
          <button bindtap="bindSendDanmu">发送弹幕</button>
        </view>
      </view>
      ```

    - ```js
      bindSendDanmu() {
          this.data.videoContext.sendDanmu({
            text: '6666',
            color:'#00b26a'
          })
        },
       onReady: function () {
          this.data.videoContext = wx.createVideoContext('myVideo')
        },
      ```

• Finding Elements

    - ```js
      const query = wx.createSelectorQuery();
           //        定义选择器，查找元素位置
      query.select('#bottom').boundingClientRect()
      query.exec(ele=>ele);
      ```

The introduction of resource

html import

  <include src=""/>

js import

  <wxs src="./../test/test.wxs" module="test"/> 相对路径
  
  <view>
  
    {{test.name}}
  
  </view>
  

Import css @import "common.wxss";

Route parameters:

  onLoad: function(option){
      console.log(option.query)
    }    

• Picture Preview wx.preview
• Local storage wx.setStorageSync

Pull up down

• Operating pullup and pulldown need to trigger must js file, declare that the corresponding callback function
  • Pull-down function onPullDownRefresh -> need to configure xxx.json
    • enablePullDownRefresh:true
  • Pull-bottomed onReachBottom
  • Stop function wx.stopPullDownRefresh pull-down ()
• __ above function can be configured to automatically output by Page editor, single-page reference configuration window properties

------

Package

• Create a compoment
• .Json its configuration file component: true
• .Json defined in the file using the component's
  • usingComponents: {Name: Path}
• In the pages that use the component name

Receive data

• `js
  properties: {
  text:{
  type:Number,
  value:888
  }
  }

  ### 组件wxml的slot

  在组件的wxml中可以包含 `slot` 节点，用于承载组件使用者提供的wxml结构。

  默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件js中声明启用。

Component ({options: {multipleSlots: true // enable multi-slot support options when component definition}, the Properties: {/ ... /}, Methods: {/ ... /}})

  此时，可以在这个组件的wxml中使用多个slot，以不同的 `name` 来区分。

Here are the details of the internal components

  使用时，用 `slot` 属性来将节点插入到不同的slot上。

This is inserted into content = "before" the assembly slot name This is the content into the assembly slot name = "after" in `

style

• Use class as much as possible, it can be specified component in the default style node using :hostthe selector

Use plug-ins

• Enter the official backstage add plug-ins, and other information to obtain appid
• App.json configuration file into the plugins: { "name": {information}}
• According to the document using the plug-in plug-ins (there may be components) need to configure usingComponent

log in