一. .wxml 文件中的基本語(yǔ)法
<!-- view: 相當(dāng)于div -->
<!-- text: 相當(dāng)于span -->
<view>
<!-- 1.插入data中的自定義數(shù)據(jù) -->
<text> {{ msg }} </text>
<!-- 2.屬性的動(dòng)態(tài)值 -->
<text title="{{ msg }}"></text>
<!-- 3.能夠解析標(biāo)簽的插入方式 -->
<rich-text nodes=" {{ msg }}"></rich-text>
<!-- 4.條件語(yǔ)句wx:if -->
<text wx:if="{{ flag === 1 }}">flag為1時(shí)顯示</text>
<text wx:elif="{{ flag === 2 }}">flag為2時(shí)顯示</text>
<text wx:else>flag不是以上兩種情況時(shí)顯示</text>
<!-- 5.循環(huán)語(yǔ)句 wx:for -->
<!-- 使用循環(huán)時(shí)，默認(rèn) item 代表數(shù)組中的每一個(gè)元素浑娜，index表示元素的索引 -->
<!-- 如果覺(jué)得item不夠語(yǔ)義化惊豺，可以使用 wx:for-item="別名" wx:for-index="別名" 來(lái)指定別名 -->
<!-- 注意: 指定別名后，item和index將不能再使用 -->
<!-- 記得要加key值 -->
<view>
<!-- 默認(rèn)寫(xiě)法 -->
<text wx:for="{{ lists }}" wx:key="{{ }}">
{{ item }}, {{ index }}
</text>
<!-- 指定別名寫(xiě)法 -->
<text
wx:for="{{ lists }}"
wx:for-item="list"
wx:for-index="ind"
wx:key="{{ }}"
>
{{ list }}, {{ ind }}
</text>
</view>
<!-- 6.綁定事件 -->
<!-- bindtap="handle"喇勋，不傳遞參數(shù)寫(xiě)法 -->
<button bindtap="handle">點(diǎn)擊觸發(fā)handle自定義方式</button>
<!-- 傳遞參數(shù)寫(xiě)法 data-id="1": 表示傳遞id參數(shù) -->
<button bindtap="handle" data-id="1">點(diǎn)擊觸發(fā)handle自定義方式</button>
</view>
二. .js 文件中的常用屬性
Page({
// 自定義: handle處理函數(shù)（綁定的點(diǎn)擊事件的處理函數(shù)）
handle( ev ){
// 獲取傳遞的參數(shù)的值
const id = ev.target.dataset.id;
},
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
// 1. 自定義數(shù)據(jù)
msg: "自定義的msg變量",
scrollTop: 0
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
*/
onLoad: function (options) {
// 2. 獲取data中的數(shù)據(jù)
const msg = this.data.msg;
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
*/
onShow: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
*/
onHide: function () {
},
/**
* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
*/
onUnload: function () {
},
/**
* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
// 3. 需要在app.json中開(kāi)啟 window.enablePullDownRefresh 值為 true
},
/**
* 頁(yè)面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
// 4. 當(dāng)前頁(yè)面滾動(dòng)到底部時(shí)自動(dòng)觸發(fā)
},
// 5. 頁(yè)面滾動(dòng)時(shí)自動(dòng)觸發(fā)的函數(shù)
onPageScroll: function(ev) {
// 6. 修改data中的數(shù)據(jù)
this.setData({
scrollTop: ev.scrollTop
});
// 7. 設(shè)置滾動(dòng)
[wx.pageScrollTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html)
}
})
三、小程序的全局配置和頁(yè)面局部配置
官方網(wǎng)址: 全局配置
// app.json中對(duì)小程序進(jìn)行全局配置
{
"pages":[
"pages/index/index",
"pages/profile/profile"
],
"window":{
"navigationBarBackgroundColor": "#FF6600",
"navigationBarTitleText": "首頁(yè)",
"navigationBarTextStyle":"white",
"backgroundColor": "#ccc",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true
},
"tabBar": {
"color": "#333",
"selectedColor": "#ff6600",
"list": [{
"pagePath": "pages/indArticle/indArticle",
"text": "首頁(yè)",
"iconPath": "imgs/index.png",
"selectedIconPath": "imgs/index_active.png"
},{
"pagePath": "pages/profile/profile",
"text": "我的",
"iconPath": "imgs/concat.png",
"selectedIconPath": "imgs/concat_active.png"
}]
}
}
四别凤、頁(yè)面跳轉(zhuǎn)及攜帶參數(shù)
<!-- 1. 標(biāo)簽式導(dǎo)航 -->
網(wǎng)址: [navigator](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)
// 2. 編程式跳轉(zhuǎn)
網(wǎng)址:[wx.navigateTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html)
// 示例:
wx.navigateTo({
url: `/pages/article/article?id=1&a=2`,
})
// 跳轉(zhuǎn)后饰序，在頁(yè)面中接收的方式
Page({
onLoad (options) {
// options就是 {id: 1, a: 2}
const id = options.id
}
})
// 注意: 不能跳轉(zhuǎn)到tabBar對(duì)應(yīng)的頁(yè)面中，如果要跳轉(zhuǎn)到tabBar规哪，請(qǐng)使用
網(wǎng)址: [wx.switchTab](https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html)
wx.switchTab({
url: '/index'
})
五求豫、微信小程序父子通信和子父通信
// 假設(shè)頁(yè)面index中需要引入article組件
// 1. 則在index.json中進(jìn)行如下配置
{
"usingComponents": {
"article-detail": "/components/article/article"
}
}
// 2. 然后在index.wxml中使用即可
<view>
<article-detail></article-detail>
</view>
1. 向組件中傳遞值
<view>
<article-detail msg="{{ msg }}"></article-detail>
</view>
// 然后在article.js中接收
properties: {
msg:{
type: String,
value: ""
}
}
2. 向父頁(yè)面中傳遞值
// 首先在子組件中
this.triggerEvent("getArticleById", { id: id });
// 然后在父組件中
<view>
<article-detail bindgetArticleById="handleGetArticle"></article-detail>
// 或者
<article-detail bind:getArticleById="handleGetArticle"></article-detail>
</view>
// 最后自定義處理函數(shù)接收參數(shù)
getArticleById(ev) {
const id = ev.detail.id;
}
