基础语言
其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。
数据绑定
view{{ message }}/viewview id="item-{{id}}"/viewview wx:if="{{condition}}"/viewcheckbox 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/viewview wx:elif="{{length 2}}"2/viewview wx:else3/view
app.js
导出module.exports.sayHello = sayHelloexports.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.jsComponent({ 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.jsmodule.exports = Behavior({ behaviors: [], properties: { myBehaviorProperty: { type: String } }, data: { myBehaviorData: {} }, attached() {}, methods: { myBehaviorMethod() {} }})
事件监听以及触发
component-tag-name bind:myevent="onMyEvent" /button bindtap="onTap"点击这个按钮将触发“myevent”事件/buttonComponent({ 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
