整理一些微信小程序常用的技术知识点，入门之用。
一、事件绑定
bindtap
<button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button>
<button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
二、样式导入
@import
@import 'style/weui.wxss';
三、列表渲染
wx:for
Page({
items: [{
message: 'foo',
},{
message: 'bar'
}]
})
<view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">
{{index}}: {{item.message}}
</view>
block wx:for
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
四、模块化
定义：
// common.js
function sayHello() {
console.log("hello");
}
module.exports = {
sayHello:sayHello
}
引用：
//index.js
const common = require("../../utils/common.js");
function say() {
common.sayHello();
}
五、8大组件
- 视图容器
- 基础内容
- 表单组件
- 操作反馈
- 导航
- 媒体组件
- 地图
- 画布
六、三个文件
- app.js
- app.json
- app.wxss
七、获取App实例
var app = getApp();
八、模板
定义：
<template name="tplName">
<view>模板内容：{{data}}</view>
</template>
导入：
<import src="../common/common.wxml" />
引用：
<template is="tplName" data="{{data}}" />
九、数据绑定
WXML中的动态数据均来自Page的data对象
动态数据绑定可以使用this.setData({name:_name});动态赋值
定义：
Page({
data:{
title:"测试"
}
})
使用：
<view>{{title}}</view>
显示：
测试
十、条件渲染
定义：
Page({
data:{
has:true,
age:18
}
})
使用：
<view wx:if="{{has}}">已存在</view>
<view wx:if="{{age < 18}}">少年</view>
<view wx:elif="{{age = 18}}">青年</view>
<view wx:else>成年</view>
<block wx:if="{{has}}">
<view>内容1</view>
<view>内容2</view>
<view>内容3</view>
<view>内容4</view>
</block>
显示：
已存在
青年
内容1
内容2
内容3
内容4
十一、运算
定义：
Page({
data:{
show:true,
a:1,
b:2,
c:3,
name:"hello"
}
})
使用：
<view hidden="{{show ? true : false}}">显示</view>
<view>{{a+b}} + {{b+c}} + a</view>
<view>{{"say " + name}}</view>
显示：
// test.wxml
显示
3+5+a
say hello
十二、跳转
定义：
<!-- sample.wxml -->
<view>
<navigator url="navigate?title=navigate">跳转到新页面</navigator>
<navigator url="redirect?title=redirect" redirect>在当前页打开</navigator>
</view>
获取：
// redirect.js navigator.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
显示：
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>
通过事件跳转：
// test.js
go: function() {
wx.navigateTo({
url: '../detail'
})
},
页面事件绑定：
//detail.wxml
<view bindtap="go">
<text>下一页</text>
</view>
十三、表单
定义：
//form.wxml
<form bindsubmit="formSubmit" bindreset="formReset">
<view>
<view>input</view>
<input name="input" placeholder="please input here" />
</view>
<view>
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>
获取：
//test.js
Page({
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
console.log('form发生了submit事件，携带数据input为：', e.detail.value.input)
},
formReset: function() {
console.log('form发生了reset事件')
}
})
想学习更多的小程序知识，可以查看官方说明文档https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html
