微信小程序新增页面
在app.js中新增对应的页面引用，然后保存即可，如"pages/demo01/demo01"
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/demo01/demo01"
]
注：这个方法只能在微信开发者工具中使用
首页默认是第一个页面
只要把页面放在第一行，默认就是主页
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/demo01/demo01"
]
这样设置则index为首页
tabBar
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "icon/_home.png",
"selectedIconPath": "icon/home.png"
},{
"pagePath": "pages/picture/picture",
"text": "图片",
"iconPath": "icon/_img.png",
"selectedIconPath": "icon/img.png"
}],
"position": "top"
}
list中必须是两个以上json对象，pagePath中的页面必须在page存在
position 属性控制tabBar上面显示还是下面显示
text标签和view标签
<!--
1、text相当于web中的span标签，行内元素 不会换行
2、view相当于web中的div标签 块级元素 会换行
-->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>
小程序开发助手
在vscode中安装插件小程序开发助手
我们只需要在wxml中写text会自动进行如下补全
<text class="" selectable="false" space="false" decode="false">
</text>
在页面js中写page，也会自动补全page的生命周期
数据绑定
data: {
msg:"hello mina",
num:100,
isGirl:true,
person:{
name:"zhangsan",
age:30,
heigte:170,
weight:130
},
isCheck:true
}
<!--1、字符串-->
<view>{{msg}}</view>
<!--2、数字-->
<view>{{num}}</view>
<!--3、Boolean-->
<view>{{isGirl}}</view>
<!--4、object 类型-->
<view>{{person.name}}</view>
<view>{{person.age}}</view>
<!--5、在标签属性中使用变量-->
<view data-num="{{num}}"></view>
<view>
<checkbox checked="{{isCheck}}"></checkbox>
</view>
引号和大括号之间不能有空格，否则会导致解析失败如：
<checkbox checked=" {{false}}"> </checkbox>
大括号里可以写三元表达式，如
<view>{{11%2===0?"偶数":"奇数"}}</view>
wx:for
普通数组循环
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
wx:key =“*this” 就表示 你的数组 是一个普通的数组 *this 表示是 循环项 不写wx:key控制台会报警告
array: [{
message: 'foo',
}, {
message: 'bar'
}]
<view wx:for="{{array}}" wx:key ="*this">
{{index}}: {{item.message}}
</view>
对象循环
1 wx:for=“{{对象}}” wx:for-item=“对象的值” wx:for-index=“对象的属性”
2 循环对象的时候 最好把 item和index的名称都修改一下
wx:for-item=“value” wx:for-index=“key”
person:{
name:"zhangsan",
age:30,
heigte:170,
weight:130
}
<view>
<view>对象循环</view>
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
wx:key="age"
>
属性:{{key}}
--
值:{{value}}
</view>
</view>
block标签
占位符的标签 写代码的时候 可以看到这标签存在 页面渲染 小程序会把它移除掉
<block wx:for="{{array}}" wx:key ="*this">
{{index}}: {{item.message}}
</block>
这里的block标签没有任何效果
条件渲染
1 wx:if=“{{true/false}}” 控制显示隐藏
或者是三个条件显示一个：wx:if wx:elif wx:else
2 hidden
在标签上直接加入属性 hidden或hidden=“{{true}}”
3 什么场景下用哪个
当标签不是频繁的切换显示 优先使用 wx:if，直接把标签从 页面结构给移除掉
当标签频繁的切换显示的时候 优先使用 hidden，通过添加样式的方式来切换显示
hidden 属性 不要和 样式 display一起使用, 这样还是会显示的，会导致hidden的修饰无效
<view>
<view>条件渲染</view>
<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">隐藏</view>
<view wx:if="{{flase}}">1</view>
<view wx:elif="{{flase}}">2 </view>
<view wx:else> 3 </view>
<view>---------------</view>
<view hidden >hidden1</view>
<view hidden="{{false}}" >hidden2</view>
<view>-----000-------</view>
<view wx:if="{{false}}">wx:if</view>
<view hidden style="display: flex;" >hidden</view>
</view>
事件绑定（需求：获取输入的值）
input标签中输入的值可以在view标签中展示(值改变触发事件)
1 需要给input标签绑定 input事件 绑定关键字 bindinput
2 如何获取 输入框的值 通过事件源对象来获取 e.detail.value
3 把输入框的值 赋值到 data当中不能直接
1 this.data.num=e.detail.value
2 this.num=e.detail.value
正确的写法
this.setData({
num:e.detail.value
})
<input type="text" bindinput="handleInput"/>
<view>{{num}}</view>
data: {
num: 0
},
handleInput(e) {
console.log(e);
this.setData({
num:e.detail.value
})
}
事件绑定（值传递）
实现+1和-1，值传递不能直接在括号中写 ，需要加入一个点击事件 bindtap，通过自定义属性的方式来传递参数，如 data-oper = “{{1}}” 传递的参数是oper，js中获取data中的值this.data.num，获取页面传过来的值 e.currentTarget.dataset.oper
<button bindtap="buttonOper" data-oper = "{{1}}">+1</button>
<button bindtap="buttonOper" data-oper = "{{-1}}">-1</button>
<view>{{num}}</view>
data: {
num: 0
},
buttonOper(e) {
console.log(e);
this.setData({
num: this.data.num + e.currentTarget.dataset.oper
})
}
尺⼨计算
rpx （responsive pixel）: 可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在
iPhone6 上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像 750rpx = 375px = 750物理像
素 ， 1rpx = 0.5px = 1物理像素 1rpx = 0.5px = 1物理像素 。
需求1： 存在一个设计稿750px，设计一个文本区，宽度相对于设计稿为200px
750 px = 750 rpx
1 px = 1 rpx
200 px = 200 rpx
宽度：750rpx * 200 / 750
view{
width: 200rpx;
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
}
需求2： 存在一个设计稿375px，设计一个文本区，宽度相对于设计稿为200px
375 px = 750 rpx
1 px = 2 rpx
200 px = 400 rpx
宽度：750rpx * 200 / 370
view{
/* width: 200rpx; */
height: 200rpx;
font-size: 40rpx;
background-color: aqua;
/* 以下代码写法是错误 */
/* width:750 rpx * 100 / 375 ; */
width:calc(750rpx * 100 / 375);
}
利用 一个属性 calc属性 css 和 wxss 都支持 一个属性
注意：750 和 rpx 中间不要留空格
样式导入
1 引入的 代码 是通过 @import 来引入
2 路径 只能写相对路径
@import "../../style/common.wxss";
⼩程序中使⽤less
- 编辑器是 vscode
- 安装插件 easy less
- 在vs code的设置中加⼊如下，配置
"less.compile": {
"outExt": ".wxss"
}
- 在要编写样式的地⽅，新建 less ⽂件，如 index.less ,然后正常编辑即可。
在页面文件夹中新建.less结尾的文件，保存后会自动生成.wxss文件
/* 1 定义less变量 */
@color:yellow;
text{
/* 2 使用变量 */
color:@color;
}
view{
.vie1{
text{
color: red;
}
}
}
/* 导入 */
@import "../../styles/reset.less";
view{
color: @themeColor;
}
text标签
- ⽂本标签
- 只能嵌套text
- ⻓按⽂字可以复制（只有该标签有这个功能）
- 可以对空格 回⻋ 进⾏编码
<!--
1 长按文字复制 selectable
2 对文本内容 进行 解码 decode
-->
<text selectable decode>
text 123 <
</text>
image标签
因为腾讯要求小程序大小不能超过2m，所以图片都是是来自外网的。
轮播图
<!--
1 轮播图外层容器 swiper
2 每一个轮播项 swiper-item
3 swiper标签 存在默认样式
1 width 100%
2 height 150px image 存在默认宽度和高度 320 * 240 （默认的一般显示会有问题）
3 swiper 高度 无法实现由内容撑开
4 先找出来 原图的宽度和高度 等比例 给swiper 定 宽度和高度
原图的宽度和高度 1125 * 352 px
swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度
swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度
height: 100vw * 352 / 1125
5 autoplay 自动轮播
6 interval 修改轮播时间
7 circular 衔接轮播
8 indicator-dots 显示 指示器 分页器 索引器
9 indicator-color 指示器的未选择的颜色
10 indicator-active-color 选中的时候的指示器的颜色
-->
<swiper autoplay interval="2000" 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>
/* pages/demo01/demo01.wxss */
swiper {
width: 100%;
/* height: calc(100vw * 352 / 1125); */
height: 31.28vw;
}
image {
width: 100%;
}
navigator 导航组件 类似超链接
<!--
导航组件 navigator
0 块级元素 默认会换行 可以直接加宽度和高度
1 url 要跳转的页面路径 绝对路径 相对路径
2 target 要跳转到当前的小程序 还是其他的小程序的页面
self 默认值 自己 小程序的页面
miniProgram 其他的小程序的页面
3 open-type 跳转的方式
1 navigate 默认值 保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
2 redirect 关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
3 switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
4 reLaunch 关闭所有页面，打开到应用内的某个页面
-->
<navigator url="/pages/demo05/demo05"> 轮播图页面 </navigator>
<navigator url="/pages/index/index"> 直接跳转到 tabbar页面 </navigator>
<navigator open-type="redirect" url="/pages/demo05/demo05"> 轮播图页面 redirect </navigator>
<navigator open-type="switchTab" url="/pages/index/index"> switchTab直接跳转到 tabbar页面 </navigator>
<navigator open-type="reLaunch" url="/pages/index/index"> reLaunch 可以随便跳 </navigator>
rich-text 富文本标签
可以将字符串解析成 对应标签，类似 vue中 v–html 功能
<!--
rich-text 富文本标签
1 nodes属性来实现
1 接收标签字符串
2 接收对象数组
-->
<rich-text nodes="{{html}}"></rich-text>
// pages/demo12/demo12.js
Page({
data: {
// 1 标签字符串 最常用的
html:'<div class="tpl-wrapper" data-tpl-id="m_h_v31icon_1" style="margin-top: -10px;"><div view-name="DFrameLayout" style="display: flex; overflow: hidden; height: 160px; width: 375px; place-self: flex-start; position: relative;"><div view-name="DView" style="display: flex; overflow: hidden; background-color: rgb(255, 255, 255); margin-top: 9px; height: 100%; width: 100%; top: 0px; left: 0px; position: absolute;"></div><div view-name="HImageView" style="display: flex; overflow: hidden; height: 100%; width: 100%; position: absolute;"><div style="width: 100%; height: 100%; background-image: url("https://gw.alicdn.com/tps/TB155AUPpXXXXajXVXXXXXXXXXX-1125-480.png_.webp"); background-repeat: no-repeat; background-position: center center; background-size: contain;"></div></div><div view-name="DLinearLayout" aria-label="天猫" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 10px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB1Wxi2trsrBKNjSZFpXXcXhFXa-183-144.png_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫</div></div><div view-name="DLinearLayout" aria-label="聚划算" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 83.5px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://img.alicdn.com/tfs/TB10UHQaNjaK1RjSZKzXXXVwXXa-183-144.png?getAvatar=1_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">聚划算</div></div><div view-name="DLinearLayout" aria-label="天猫超市" style="display: flex; overflow: hidden; width: 61px; height: 67px; margin-left: 304px; margin-top: 13px; -webkit-box-orient: vertical; flex-direction: column; top: 0px; left: 0px; position: absolute;"><div view-name="HGifView" style="display: flex; overflow: hidden; width: 61px; height: 48px;"><div style="width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url("https://gw.alicdn.com/tfs/TB1IKqDtpooBKNjSZFPXXXa2XXa-183-144.png_.webp");"></div></div><div view-name="DTextView" style="display: inline-block; overflow: hidden; font-size: 11px; height: auto; margin-top: 5px; text-align: center; color: rgb(102, 102, 102); width: 61px; text-overflow: ellipsis; white-space: nowrap; line-height: 14px;">天猫超市</div></div></div></div>'
// 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"
// }
// ]
// }
// ]
// }
// ]
}
})
button 按钮组件
<!--
button 标签
1 外观的属性
1 size 控制按钮的大小
1 default 默认大小
2 mini 小尺寸
2 type 用来控制按钮的颜色
1 default 灰色
2 primary 绿色
3 warn 红色
3 plain 按钮是否镂空，背景色透明
4 loading 文字前显示正在等待图标
-->
<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>
<!--
button 开发能力
open-type：
1 contact 直接打开 客服对话功能 需要在微信小程序的后台配置 只能够通过真机调试来打开
2 share 转发当前的小程序 到微信朋友中 不能把小程序 分享到 朋友圈
3 getPhoneNumber 获取当前用户的手机号码信息 结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码
1 绑定一个事件 bindgetphonenumber
2 在事件的回调函数中 通过参数来获取信息
3 获取到的信息 已经加密过了
需要用户自己待见小程序的后台服务器，在后台服务器中进行解析 手机号码，返回到小程序中 就可以看到信息了
4 getUserInfo 获取当前用户的个人信息
1 使用方法 类似 获取用户的手机号码
2 可以直接获取 不存在加密的字段
5 launchApp 在小程序当中 直接打开 app
1 需要现在 app中 通过app的某个链接 打开 小程序
2 在小程序 中 再通过 这个功能 重新打开 app
3 找到 京东的app 和 京东的小程序
6 openSetting 打开小程序内置的 授权页面
1 授权页面中 只会出现 用户曾经点击过的 权限
7 feedback 打开 小程序内置的 意见反馈页面
1 只能够通过真机调试来打开
-->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>
// pages/demo13/demo13.js
Page({
// 获取用户的手机号码信息
getPhoneNumber(e){
console.log(e);
},
// 获取用户个人信息
getUserInfo(e){
console.log(e);
}
})
icon 图标组件
<!--
小程序中的字体图标
1 type 图标的类型
success|success_no_circle|info|warn|waiting|cancel|download|search|clear
2 size 大小
3 color 图标的颜色
-->
<icon type="cancel" size="60" color="#0094ff"> </icon>
radio 单选组件
<!--
radio 单选框
1 radio标签 必须要和 父元素 radio-group来使用
2 value 单选框的值
3 需要给 radio-group 绑定 change事件
4 需要在页面中显示 选中的值
-->
<radio-group bindchange="handleChange">
<radio color="red" value="male">男</radio>
<radio color="red" value="female" >女</radio>
</radio-group>
<view>您选中的是:{{gender}}</view>
data: {
gender: ""
},
handleChange(e){
// 1 获取单选框中的值
let gender=e.detail.value;
// 2 把值 赋值给 data中的数据
this.setData({
// gender:gender
gender
})
}
checkbox 复选框组件
需要搭配 checkbox-group ⼀起使⽤
<view>
<checkbox-group bindchange="handleItemChange">
<checkbox value="{{item.name}}" wx:for="{{list}}" wx:key="id">
{{item.name}}
</checkbox>
</checkbox-group>
<view>
选中的水果:{{checkedList}}
</view>
</view>
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
})
}
自定义组件
组件js
// components/Tabs/Tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
// 组件拿到页面中传过来的数据，类型数组，默认值空数组
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
hanldeItemTap(e){
// 相当于：const index = e.currentTarget.dataset.index;
const {index}=e.currentTarget.dataset;
//触发父页面中的事件，并传递index值
this.triggerEvent("itemChange",{index});
}
}
})
组件HTML
<view class="tabs">
<view class="tabs_title">
<view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabs}}" wx:key="id" data-index="{{index}}" bindtap="hanldeItemTap">
{{item.name}}
</view>
</view>
<view class="tabs_content">
<slot ></slot>
</view>
</view>
组件css
.tabs_title{
display: flex;
padding: 10rpx 0;
}
.title_item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.active{
color:red;
border-bottom: 5rpx solid currentColor;
}
页面js
// pages/demo11/demo11.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs: [
{
id: 0,
name: "首页",
isActive: true
},
{
id: 1,
name: "原创",
isActive: false
}
,
{
id: 2,
name: "分类",
isActive: false
}
,
{
id: 3,
name: "关于",
isActive: false
}
]
},
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
})
}
})
页面html
<!--
1、tabs="{{tabs}}"传递数据给组件
2、binditemChange="handleItemChange"用来接收组件传过来的值
-->
<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>3</block>
</Tabs>
页面json
{
"usingComponents": {
"Tabs":"../../components/Tabs/Tabs"
}
}
程序生命周期
//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");
}
})
页面生命周期
页面js
// 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、腾讯wepy 类似vue
2、美团 mpvue 类似vue
3、京东 taro 类似react
4、滴滴 chameleon
5、uni-app 类似vue
2243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
