一、基本语法
1、数据绑定
<view>{
{
num1}}</view>
<iamge src= "{
{imgSrc}}" />
<view>{
{
num2>3?num2:num2+3}}</view>
page({
data:{
num:1,
num2:2,
str:'demo',
imgSrc:'http://www.demo.com/1.png'
}
})
2、事件绑定
addCount(step){
this.setData({
count:this.data.count+step
})
}
<button type="primary" bindtap="add" data-step="{
{1}}">+1</button>
3、条件渲染
<image src="./1.png" wx:if="{
{flag===1}}" />
<image src="./1.png" wx:elif="{
{flag===2}}" />
<image src="./1.png" wx:else />
4、列表渲染
Page({
// 通过 data 属性，初始化页面中用到的数据
data: {
brands: [
{
name: '耐克',
origin: '美国',
category: ['男装', '女装', '鞋', '体育用品']
},
{
name: 'SK-II',
origin: '韩国',
category: ['防晒霜','面膜', '洗护']
}
]
}
});
<view wx:for="{
{brands}}" wx:for-index="k" wx:for-item="v">
<view>
<text>{
{
k+1}} </text>
<text> {
{
v.name}} </text>
<text> {
{
v.origin}}</text>
</view>
<view>
<text wx:for="{
{v.category}}">{
{
item}}</text>
</view>
</view>
5、导航跳转
<navigator url="../logs/logs" open-type="redirect">日志</navigator>
<navigator open-type="navigateBack">返回</navigator>
<navigator open-type="reLaunch" url="/page/todo/todo">重启</navigator>
6、声明试导航传参
<navigator url="/pages/life/life?num=20">生命周期20</navigator>
<navigator url="/pages/life/life?num=5">生命周期5</navigator>
接收导航传来的的参数
//生命周期函数
onLoad:function(options){
console.log(options) //options 就是传递过来的参数对象
}
7、下拉监听 上拉触底事件
onPullDownRefresh:function(){
//业务逻辑
}
onPullDownRefresh:function(){
//业务逻辑
wx.stopPullDownRefresh()
}
上拉触底
onReachBottom:function(){
console.log('上拉触底')
}
8、页面生命周期
Page({
//页面加载，一个页面只调用一次
onLoad:function(optins){
},
//监听页面显示
onShow:function(){
},
//监听页面初次渲染完成 一个页面只调用一次
onReady:function(){
},
//监听页面隐藏
onHide:function(){
},
//监听页面卸载，一个页面只调用一次
onUnload:function(){
}
})
9、父传子
//父组件
data:{
count:0
}
<view>
<test count="{
{count}}"></test>
</view>
//子组件
properties:{
count:{
type:Number,
default:1
}
}
10、自定义组件
1.创建组件
1、在项目的根目录中，鼠标右键，创建 components -> test 文件夹
2、在新建的 components -> test 文件夹上，鼠标右键，点击“新建Component”
3、键入组件的名称之后会漕河，会自动生成组件对应的 4 个为恩建，后缀名分别为 .js 、.json 、.wxml 和 .wxss
2.引入组件
全局引入
// 在页面的 app.json 文件中，引入组件
{
"pages": []
"window": {
}
"usingComponents": {
"my-test": "/components/test/test"
}
}
局部引用
// 在页面的 .json 文件中，引入组件
{
"usingComponents": {
"my-test": "/components/test/test"
}
}
// 在页面的 .wxml 文件中，使用组件