-
微信小程序
一、wechat的模板语法
1.数据绑定
- text标签相当于以前的web中的span标签，行内元素 不会换行
- view标签相当于以前的web中的div标签，块状元素 会换行
- checkbox标签相当于以前的复选框
<text>1text> <view>2view> <view>{{message}}view> <view>{{number}}view> <view>{{isGirl}}view> <view>{{person.age}}view> <view data-num="{{num}}">自定义属性view> <view> <checkbox checked="{{isChecked}}">checkbox> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
2.运算
<view>{{1+1}}view> <view>{{'1'+'1'}}view> <view>{{ 11%2===0 ? '偶数' : '奇数' }}view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
3.列表渲染
- 列表循环
-
wx:for=“{{数组或者对象}}” wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”
-
wx:key=“唯一的值” 用来提高列表渲染的性能
-
wx:key 绑定一个普通的字符串的时候 那么这个字符串名称 肯定是 循环数组 中的 对象的 唯一属性
-
wx:key =“*this” 就表示 你的数组 是一个普通的数组 *this 表示是 循环项
[1,2,3,44,5]
[“1”,“222”,“adfdf”]
-
-
当出现 数组的嵌套循环的时候 尤其要注意 以下绑定的名称 不要重名
wx:for-item=“item” wx:for-index=“index”
-
默认情况下 我们 不写
wx:for-item=“item” wx:for-index=“index”
小程序也会把 循环项的名称 和 索引的名称 item 和 index
只有一层循环的话 （wx:for-item=“item” wx:for-index=“index”） 可以省略
- 对象循环
-
wx:for=“{{对象}}” wx:for-item=“对象的值” wx:for-index=“对象的属性”
-
循环对象的时候 最好把 item和index的名称都修改一下
wx:for-item=“value” wx:for-index=“key”
<view> <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" > 索引：{{index}} -- 值:{{item.name}} view> view> <view> <view>对象循环view> <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="age" > 属性:{{key}} -- 值:{{value}} view> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
4.block
- 占位符的标签
- 写代码的时候 可以看到这标签存在
- 页面渲染 小程序会把它移除掉
<view> <block wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id" class="my_list" > 索引：{{index}} -- 值:{{item.name}} block> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
5.条件渲染
-
wx:if=“{{true/false}}”
1 if , else , if else
wx:if
wx:elif
wx:else
-
hidden
-
在标签上直接加入属性 hidden
-
hidden=“{{true}}”
-
-
什么场景下用哪个
-
当标签不是频繁的切换显示 优先使用 wx:if
直接把标签从 页面结构给移除掉
-
当标签频繁的切换显示的时候 优先使用 hidden
通过添加样式的方式来切换显示 hidden 属性 不要和 样式 display一起使用
-
<view> <view>条件渲染view> <view wx:if="{{true}}">显示view> <view wx:if="{{false}}">隐藏view> <view wx:if="{{flase}}">1view> <view wx:elif="{{flase}}">2 view> <view wx:else> 3 view> <view>---------------view> <view hidden >hidden1view> <view hidden="{{false}}" >hidden2view> <view>-----000-------view> <view wx:if="{{false}}">wx:ifview> <view hidden style="display: flex;" >hiddenview> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
6.事件绑定
<input type="text" bindinput="handleInput" /> <button bindtap="handletap" data-operation="{{1}}" >+button> <button bindtap="handletap" data-operation="{{-1}}">-button> <view> {{num}} view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
Page({ data: { num: 0 }, // 输入框的input事件的执行逻辑 handleInput(e) { // console.log(e.detail.value ); this.setData({ num: e.detail.value }) }, // 加 减 按钮的事件 handletap(e) { // console.log(e); // 1 获取自定义属性 operation const operation = e.currentTarget.dataset.operation; this.setData({ num: this.data.num + operation }) } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
二、wechat样式
1. rpx
/* 1 小程序中 不需要主动来引入样式文件 2 需要把页面中某些元素的单位 由 px 改成 rpx 1 设计稿 750x 750 px = 750 rpx 1 px = 1 rpx 2 把屏幕宽度 改成 375px 375 px = 750 rpx 1 px = 2rpx 1rpx = 0.5px 3 存在一个设计稿 宽度 414 或者 未知 page 1 设计稿 page 存在一个元素 宽度 100px 2 拿以上的需求 去实现 不同宽度的页面适配 page px = 750 rpx 1 px = 750 rpx / page 100 px = 750 rpx * 100 / page 假设 page = 375px 4 利用 一个属性 calc属性 css 和 wxss 都支持 一个属性 1 750 和 rpx 中间不要留空格 2 运算符的两边也不要留空格 */ view{ /* width: 200rpx; */ height: 200rpx; font-size: 40rpx; background-color: aqua; /* 以下代码写法是错误 */ /* width:750 rpx * 100 / 375 ; */ width:calc(750rpx * 100 / 375); }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
2.引入样式文件
/* 1 引入的 代码 是通过 @import 来引入 2 路径 只能写相对路径 */ @import "../../styles/common.wxss";- 1
- 2
- 3
- 4
- 5
3.引入less文件
/* 1.现在插件easy less插件 2.在设置中添加： "less.compile": { "outExt": ".wxss" } 3.使用 */ /* 1 定义less变量 */ @color:yellow; text{ /* 2 使用变量 */ color:@color; } view{ .vie1{ text{ color: red; } } } /* 导入 */ @import "../../styles/reset.less"; view{ color: @themeColor; } .main{ /* 1 less中 支持 两种注释 多行 单行 2 wxss 不能写 单行注释 因为 写了 和没写是一样！！！ */ /* font-size: 200px; */ // font-size: 400px; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
三、常用组件
1.text
<text selectable decode> text 123 < text>- 1
- 2
- 3
- 4
- 5
- 6
- 7
2.view
- 1
3.image
<image mode="bottom" lazy-load src="https://tva2.sinaimg.cn/large/007DFXDhgy1g51jlzfb4lj305k02s0sp.jpg" />- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
image{ box-sizing: border-box; border: 1px solid red; width: 300px; height: 200px; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
4.swiper
<swiper autoplay interval="1000" circular indicator-dots indicator-color="#0094ff" indicator-active-color="#ff0094"> <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i1/44/O1CN013zKZP11CCByG5bAeF_!!44-0-lubanu.jpg" /> swiper-item> <swiper-item> <image mode="widthFix" src="//aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" /> swiper-item> <swiper-item> <image mode="widthFix" src="//gw.alicdn.com/imgextra/i2/37/O1CN01syHZxs1C8zCFJj97b_!!37-0-lubanu.jpg" /> swiper-item> swiper>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
/* pages/demo10/demo10.wxss */ swiper { width: 100%; /* height: calc(100vw * 352 / 1125); */ height: 31.28vw; } image { width: 100%; }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
5.navigator
<navigator url="/pages/demo10/demo10"> 轮播图页面 navigator> <navigator url="/pages/index/index"> 直接跳转到 tabbar页面 navigator> <navigator open-type="redirect" url="/pages/demo10/demo10"> 轮播图页面 redirect navigator> <navigator open-type="switchTab" url="/pages/index/index"> switchTab直接跳转到 tabbar页面 navigator> <navigator open-type="reLaunch" url="/pages/index/index"> reLaunch 可以随便跳 navigator>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
6.rich-text
<rich-text nodes="{{html}}">rich-text>- 1
- 2
- 3
- 4
- 5
- 6
- 7
// pages/demo12/demo12.js Page({ data: { // 1 标签字符串 最常用的 // html:'' // 2 对象数组 html:[ { // 1 div标签 name属性来指定 name:"div", // 2 标签上有哪些属性 attrs:{ // 标签上的属性 class style class:"my_div", style:"color:red;" }, // 3 子节点 children 要接收的数据类型和 nodes第二种渲染方式的数据类型一致 children:[ { name:"p", attrs:{}, // 放文本 children:[ { type:"text", text:"hello" } ] } ] } ] } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
7.button
7.1 标签作用：
<button>默认按钮button> <button size="mini"> mini 默认按钮button> <button type="primary"> primary 按钮button> <button type="warn"> warn 按钮button> <button type="warn" plain> plain 按钮button> <button type="primary" loading> loading 按钮button>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
7.2开发能力
<button open-type="contact">contactbutton> <button open-type="share">sharebutton> <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumberbutton> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfobutton> <button open-type="launchApp">launchAppbutton> <button open-type="openSetting">openSettingbutton> <button open-type="feedback">feedbackbutton>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
8.icon
<icon type="cancel" size="60" color="#0094ff"> icon>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
9.radio
<radio-group bindchange="handleChange"> <radio color="red" value="male">男radio> <radio color="red" value="female" >女radio> radio-group> <view>您选中的是:{{gender}}view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
Page({ data: { gender: "" }, handleChange(e){ // 1 获取单选框中的值 let gender=e.detail.value; // 2 把值 赋值给 data中的数据 this.setData({ // gender:gender gender }) } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
10.checkbox
<view> <checkbox-group bindchange="handleItemChange"> <checkbox value="{{item.value}}" wx:for="{{list}}" wx:key="id"> {{item.name}} checkbox> checkbox-group> <view> 选中的水果:{{checkedList}} view> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
// pages/demo16/demo16.js Page({ data: { list:[ { id:0, name:"🍎", value:"apple" }, { id:1, name:"🍇", value:"grape" }, { id:2, name:"🍌", value:"bananer" } ], checkedList:[] }, // 复选框的选中事件 handleItemChange(e){ // 1 获取被选中的复选框的值 const checkedList=e.detail.value; // 2 进行赋值 this.setData({ checkedList }) } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
四、自定义组件
1.使用组件过程
- 导入组件：在.json文件中加入
{ "usingComponents": { "Tabs":"../../components/Tabs/Tabs" //标签名：组件的路径 } }- 1
- 2
- 3
- 4
- 5
- 使用组件：
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" > <block wx:if="{{tabs[0].isActive}}">0 block> <block wx:elif="{{tabs[1].isActive}}">1 block> <block wx:elif="{{tabs[2].isActive}}">2 block> <block wx:else>3block> Tabs>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2.父组件向子组件传递信息
2.1父传递
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" > <block wx:if="{{tabs[0].isActive}}">0 block> <block wx:elif="{{tabs[1].isActive}}">1 block> <block wx:elif="{{tabs[2].isActive}}">2 block> <block wx:else>3block> Tabs>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
2.2 子接收
properties: { // 要接收的数据的名称 // aaa:{ // // type 要接收的数据的类型 // type:String, // // value 默认值 // value:"" // } tabs:{ type:Array, value:[] } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
2.3子传递
点击事件触发的时候 触发父组件中的自定义事件 同时传递数据给 父组件 this.triggerEvent("父组件自定义事件的名称",要传递的参数) */ // 2 获取索引 const {index}=e.currentTarget.dataset; // 5 触发父组件中的自定义事件 同时传递数据给 this.triggerEvent("itemChange",{index});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
2.4父接收
<Taps binditemChange="handleItemChange" ></Taps> // 自定义事件 用来接收子组件传递的数据的 handleItemChange(e) { // 接收传递过来的参数 const { index } = e.detail; let { tabs } = this.data; tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false); this.setData({ tabs }) }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
3.slot标签
<view class="tabs_content"> <slot>slot> view>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
五、小程序生命周期
1.应用生命周期
//app.js App({ // 1 应用第一次启动的就会触发的事件 onLaunch() { // 在应用第一次启动的时候 获取用户的个人信息 // console.log("onLaunch"); // aabbcc // js的方式来跳转 不能触发 onPageNotFound // wx.navigateTo({ // url: '/11/22/33' // }); }, // 2 应用 被用户看到 onShow(){ // 对应用的数据或者页面效果 重置 // console.log("onShow"); }, // 3 应用 被隐藏了 onHide(){ // 暂停或者清除定时器 // console.log("Hide"); }, // 4 应用的代码发生了报错的时候 就会触发 onError(err){ // 在应用发生代码报错的时候，收集用户的错误信息，通过异步请求 将错误的信息发送后台去 // console.log("onError"); // console.log(err); }, // 5 页面找不到就会触发 // 应用第一次启动的时候，如果找不到第一个入口页面 才会触发 onPageNotFound(){ // 如果页面不存在了 通过js的方式来重新跳转页面 重新跳到第二个首页 // 不能跳到tabbar页面 导航组件类似 wx.navigateTo({ url: '/pages/demo09/demo09' }); // console.log("onPageNotFound"); } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
2.页面生命周期
// pages/demo18/demo18.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("onLoad"); // onLoad发送异步请求来初始化页面数据 }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log("onShow"); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log("onReady"); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { console.log("onHide"); }, /** * 生命周期函数--监听页面卸载 也是可以通过点击超链接来演示 * */ onUnload: function () { console.log("onUnload"); }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log("onPullDownRefresh"); // 页面的数据 或者效果 重新 刷新 }, /** * 页面上拉触底事件的处理函数 * 需要让页面 出现上下滚动才行 */ onReachBottom: function () { console.log("onReachBottom"); // 上拉加载下一页数据 }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { console.log("onShareAppMessage"); }, /** * 页面滚动 就可以触发 */ onPageScroll(){ console.log("onPageScroll"); }, /** * 页面的尺寸发生改变的时候 触发 * 小程序 发生了 横屏竖屏 切换的时候触发 */ onResize(){ console.log("onResize"); }, /** * 1 必须要求当前页面 也是tabbar页面 * 2 点击的自己的tab item的时候才触发 */ onTabItemTap(){ console.log("onTabItemTap"); } })- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
-
相关阅读:
园子的融资计划：最困难的时候偶遇最对的合伙人
CMakeList 编写示例
.NET深入了解哈希表和Dictionary
基于单片机的太阳能灯(热释电)电路设计(#0222)
Typora使用教程
数据治理-数据质量
unresolved external symbol w32_fcntl
2-1、IOC思想以及实现
C++ 和 JAVA 位运算符
vue过滤动画
- 原文地址：https://blog.csdn.net/qq_42426993/article/details/127574484
