微信小程序基础知识微信小程序基础知识

一. .wxml 文件中的基本语法

{{ msg }} flag为1时显示 flag为2时显示 flag不是以上两种情况时显示 {{ item }}, {{ index }} {{ list }}, {{ ind }}

二. .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" }] } }

四、页面跳转及携带参数

网址: [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中使用即可

1. 向组件中传递值