一. .wxml 文件中的基本语法
<!-- view: 相当于div -->
<!-- text: 相当于span -->
<view>
<!-- 1.插入data中的自定义数据 -->
<text> {{ msg }} </text>
<!-- 2.属性的动态值 -->
<text title="{{ msg }}"></text>
<!-- 3.能够解析标签的插入方式 -->
<rich-text nodes=" {{ msg }}"></rich-text>
<!-- 4.条件语句wx:if -->
<text wx:if="{{ flag === 1 }}">flag为1时显示</text>
<text wx:elif="{{ flag === 2 }}">flag为2时显示</text>
<text wx:else>flag不是以上两种情况时显示</text>
<!-- 5.循环语句 wx:for -->
<!-- 使用循环时，默认 item 代表数组中的每一个元素，index表示元素的索引 -->
<!-- 如果觉得item不够语义化，可以使用 wx:for-item="别名" wx:for-index="别名" 来指定别名 -->
<!-- 注意: 指定别名后，item和index将不能再使用 -->
<!-- 记得要加key值 -->
<view>
<!-- 默认写法 -->
<text wx:for="{{ lists }}" wx:key="{{ }}">
{{ item }}, {{ index }}
</text>
<!-- 指定别名写法 -->
<text
wx:for="{{ lists }}"
wx:for-item="list"
wx:for-index="ind"
wx:key="{{ }}"
>
{{ list }}, {{ ind }}
</text>
</view>
<!-- 6.绑定事件 -->
<!-- bindtap="handle"，不传递参数写法 -->
<button bindtap="handle">点击触发handle自定义方式</button>
<!-- 传递参数写法 data-id="1": 表示传递id参数 -->
<button bindtap="handle" data-id="1">点击触发handle自定义方式</button>
</view>
二. .js 文件中的常用属性
Page({
// 自定义: handle处理函数（绑定的点击事件的处理函数）
handle( ev ){
// 获取传递的参数的值
const id = ev.target.dataset.id;
},
/**
* 页面的初始数据
*/
data: {
// 1. 自定义数据
msg: "自定义的msg变量",
scrollTop: 0
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 2. 获取data中的数据
const msg = this.data.msg;
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
// 3. 需要在app.json中开启 window.enablePullDownRefresh 值为 true
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
// 4. 当前页面滚动到底部时自动触发
},
// 5. 页面滚动时自动触发的函数
onPageScroll: function(ev) {
// 6. 修改data中的数据
this.setData({
scrollTop: ev.scrollTop
});
// 7. 设置滚动
[wx.pageScrollTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.pageScrollTo.html)
}
})
三、小程序的全局配置和页面局部配置
官方网址: 全局配置
// app.json中对小程序进行全局配置
{
"pages":[
"pages/index/index",
"pages/profile/profile"
],
"window":{
"navigationBarBackgroundColor": "#FF6600",
"navigationBarTitleText": "首页",
"navigationBarTextStyle":"white",
"backgroundColor": "#ccc",
"backgroundTextStyle": "dark",
"enablePullDownRefresh": true
},
"tabBar": {
"color": "#333",
"selectedColor": "#ff6600",
"list": [{
"pagePath": "pages/indArticle/indArticle",
"text": "首页",
"iconPath": "imgs/index.png",
"selectedIconPath": "imgs/index_active.png"
},{
"pagePath": "pages/profile/profile",
"text": "我的",
"iconPath": "imgs/concat.png",
"selectedIconPath": "imgs/concat_active.png"
}]
}
}
四、页面跳转及携带参数
<!-- 1. 标签式导航 -->
网址: [navigator](https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html)
// 2. 编程式跳转
网址:[wx.navigateTo](https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html)
// 示例:
wx.navigateTo({
url: `/pages/article/article?id=1&a=2`,
})
// 跳转后，在页面中接收的方式
Page({
onLoad (options) {
// options就是 {id: 1, a: 2}
const id = options.id
}
})
// 注意: 不能跳转到tabBar对应的页面中，如果要跳转到tabBar，请使用
网址: [wx.switchTab](https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html)
wx.switchTab({
url: '/index'
})
五、微信小程序父子通信和子父通信
// 假设页面index中需要引入article组件
// 1. 则在index.json中进行如下配置
{
"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. 向父页面中传递值
// 首先在子组件中
this.triggerEvent("getArticleById", { id: id });
// 然后在父组件中
<view>
<article-detail bindgetArticleById="handleGetArticle"></article-detail>
// 或者
<article-detail bind:getArticleById="handleGetArticle"></article-detail>
</view>
// 最后自定义处理函数接收参数
getArticleById(ev) {
const id = ev.detail.id;
}
