摘要: 整理一些微信小程序常用的技术知识点，入门之用。。
一、事件绑定
bindtap
<button class="weui-btn" type="default" bindtap="openConfirm">Confirm Dialog</button> <button class="weui-btn" type="default" bindtap="openAlert">Alert Dialog</button>
二、样式导入
@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事件')
}
})作者：xiaowindxiao