微信小程序记录

基础语言

其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

数据绑定

<view>{{ message }}</view>
<view id="item-{{id}}"></view>
<view wx:if="{{condition}}"></view>
<checkbox checked="{{false}}"></checkbox>
特别注意：不要直接写 checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

//数据修改
this.setData({msg: 'Hello World'})

三元：

<view hidden="{{flag ? true : false}}">Hidden</view>

渲染

<block  wx:key="unique"  wx:for="{{array}}" wx:for-index="idx"  wx:for-item="itemName">
<view>
  {{idx}}: {{itemName.message}}
</view>
</block>

条件

<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>

 

 

app.js

导出
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

模块引入   var utils= require('utils/utils.js');

 

or              import  utils from 'utils/utils.js';

App({
  showload: function () {},//自定义函数
//不要在 App.onLaunch 的时候调用 getCurrentPages，此时 page 还没有生成。
  onLaunch(options) {
    // Do something initial when launch.
  this.showload(); // 调用函数
  },
  onShow(options) {
    // Do something when show.
  },
  onHide() {
    // Do something when hide.
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

const appInstance = getApp()
console.log(appInstance.globalData) // I am global data

app.json
{
  "pages": [
    "pages/home_index/home_index",
    "pages/login/login"
  ],
  "navigateToMiniProgramAppIdList": [
    "wxf588052d476d169d",
    "wx13e41a437b8a1d2e",
    "wx32540bd863b27570"
  ],
  "window": {
    "navigationBarBackgroundColor": "#f43e79",
  },
  "tabBar": {
    "color": "#333",
    "selectedColor": "#f43e79",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/home_on.png",
        "iconPath": "images/home_off.png",
        "pagePath": "pages/home_index/home_index",
        "text": "首页"
      },
      {
        "selectedIconPath": "images/me_on.png",
        "iconPath": "images/me_off.png",
        "pagePath": "pages/member_index/member_index",
        "text": "我的"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

page.js

Page({
  data: {
    text: 'This is page data.'
  },
  onLoad(options) {},
  onReady(){},
  onShow(){},
  onHide(){},
  onUnload(){},
  onPullDownRefresh(){},
  onReachBottom(){},
  onShareAppMessage(){},
  onPageScroll(){},
  onResize() {},
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap(){
    this.setData({
      text: 'Set some data for updating view.'
    }, function () {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

 

 

component.js
Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached() { },
    moved() { },
    detached() { },
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached() { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show() { },
    hide() { },
    resize() { },
  },

  methods: {
    onMyButtonTap() {
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod() {
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange(newVal, oldVal) {

    }
  }

})

父组件引用（父组件的json配置）：

{
  "navigationBarTitleText": "模板demo",
  "usingComponents": {
  "demo": "../../components/demo/index" 
                     }
 }

父组件引入

      <demo />

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached() {},
  methods: {
    myBehaviorMethod() {}
  }
})

 

事件监听以及触发

<component-tag-name bind:myevent="onMyEvent" />

<button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({
  properties: {},
  methods: {
    onTap() {
      const myEventDetail = {} // detail对象，提供给事件监听函数
      const myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

获取当前page

		let pages = getCurrentPages();
		console.log(pages[pages.length - 1]) //当前
        console.log(pages[pages.length - 2])  //上一页面
        pages[pages.length - 2].data 
        pages[pages.length - 2].fn