微信小程序
| 小程序 | App |
|---|---|
| 大小有限制 , 不超过2M(功能相对局限) | 大小无限制 (功能更强大) |
| 不用安装 , 不用更新 (方便) | 需要到商城下载 , 定期更新(复杂) |
| 打开方式 (先打微信->小程序) 适合使用频率低 | 打开方式非常方便 , 直接在桌面点击 , 适合使用频率高 |
| 跨平台 (写一次 , 运行在所有平台) 上线简单 | IOS版 , 安卓版 (小米 , 应用 , 华为 .....) 上线麻烦 |
| 成本非常非常便宜 | 成本非常非常贵 |
一、微信小程序创建
- 微信公众平台 （公众号）:
- 微信开放平台:
- 微信开发文档：
https://developers.weixin.qq.com/miniprogram/dev/framework/
- 微信开发者工具下载路径：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.htm
二、目录结构
.json 配置文件
1. 主体文件:
app.js 文件主入口
app.json 全局配置文件
app.wxss 全局的样式文件
(注意: 以上文件的文件名不能修改,且文件不能缺少)
2. 页面文件:
.wxml => .html
.wxss => .css
.js => .js
.json => .json
(小程序四个页面文件不需要互相引入)
三、创建新页面及其他介绍
3.1、创建新页面
在pages选项中直接写好路径,保存之后,自动生成四个文件
{
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/cart/cart",
"pages/cate/cate"
],
}
3.2、tabBar(json文件)
{
"entryPagePath": "pages/index/index",
"pages": [
"pages/index/index",
"pages/logs/logs",
"pages/cart/cart",
"pages/cate/cate",
"pages/mine/mine"
],
"window": {
"backgroundTextStyle": "light", //文本样式设置
"navigationBarBackgroundColor": "#f00", //导航条背景设置
"navigationBarTitleText": "首页", //导航条颜色
"navigationBarTextStyle": "white" //导航条文字颜色
(导航条文字颜色只能是black或者white两个值中的一个)
},
"style": "v2", //样式级别
"sitemapLocation": "sitemap.json",
"tabBar": {
"color": "#ccc",
"selectedColor": "#00f",
"position": "bottom", //呈现位置
"custom": false, //自定义格式
"list": [
{
"text": "首页", //tabBar文字
"pagePath": "pages/index/index", //跳转路径
"iconPath": "./bar/bar1_1.png", //图标路径
"selectedIconPath": "./bar/bar1.png" //被选择图标路径
},
{
"text": "分类",
"pagePath": "pages/cate/cate",
"iconPath": "./bar/bar2_2.png",
"selectedIconPath": "./bar/bar2.png"
},
{
"text": "我的",
"pagePath": "pages/mine/mine",
"iconPath": "./bar/bar3_3.png",
"selectedIconPath": "./bar/bar3.png"
}
]
}
}
3.3、样式单位介绍
一般,移动端尺寸是750px或者1125px,都是375的倍数
小程序常用单位: rpx (responsive) ,宽度是自适应宽度
1px=2rpx (也就是说设计稿中的100px,小程序中要写成200rpx)
四、data数据
1. 插值语法
<!--
整个页面的数据来源，都是在 js文件中对应的data属性
data:{}
-->
<!--变量解析-->
<view>{{ name }}</view>
<view id="item-{{ id }}">id属性</view>
<view id="{{ 'item-' + id }}">id属性</view>
2. 获取和设置data中的数据
//页面加载完成
onLoad(){
//1. 获取data的数据
var name=this.data.name
//2. 设置data的数据
//2.1 逻辑层数据发生变化,页面没有重新渲染
this.data.name="新值";
//2.2 即改变了逻辑数据,也改变了视图层数据
this.data.name="新值"
this.serData({
name:"新值"
},function(){
})
}
五、事件系统
1. 事件绑定
<!--vue事件绑定-->
@事件类型="方法名()"
v-on:事件类型="方法名()"
<!--小程序事件绑定-->
bind+事件类型="方法名" (允许事件冒泡)
catch+事件类型="方法名" (阻止事件冒泡)
(小程序中事件绑定,函数名不加括号)
<button bindtap="click">点击</button>
<button catchtap="click">点击</button>
<view data-name="拉拉" bindtap="click1">
<button data-btn='btn' bindtap="click2">点击</button>
<!--会产生事件冒泡-->
</view>
2. 事件传参
<button data-name="旺财" bindtap="click">点击</button>
3. 事件接参
// 自定义方法
click(e){
// e是接收的参数
let {name}=e.target.dataset;
let {name}=e.currentTarget.dataset;
}
// 总结:
1.target 获取事件源上的参数
2.currentTraget 获取当前事件组件上的参数
3.detail 组件私有事件传递的参数
六、双向数据绑定
1. 简易的双向数据绑定
<!-- model:value="" -->
适合类型: number string
<view> num:{num} </view>
<input type="text" model:value="{{num}}"/>
2. 引用类型的双向数据绑定
小程序中没有v-model这个属性, 只能用事件和值配合来代替
.wxml文件中:
<input type="text" value="{{txtVal}}" bindinput="bdipt"/>
<view>{{txtVal}}</view>
.js文件中:
bdipt(e){
this.setData({
txtVal:e.detail.value
});
},
七、数据的渲染
7.1 普通数组
<!-- vue -->
v-for="(item,index) in 数组名" :key="item.id"
<!-- 小程序 -->
wx:for="{{数组名}}"
默认:item,index
改变默认值: wx:for-item="xxx"
wx:for-index="xxx"
wx:key="*this/唯一属性"
*this: 如果item是number或者string类型,且值唯一,用*this
唯一属性: 如果item不是number或string,使用item中的唯一的属性
<!--一维数组-->
<view wx:for="{{arr}}">
{{item}}-{{index}}
</view>
<!--对象数组-->
<view wx:for="{{brr}}" wx:key="id" wx:for-item="item2" wx:for-index="index2">
{{item2.name}} - {{index2}} - {{item2.age}}
</view>
<!--添加数据不改变索引-->
<switch wx:for="{{ crr }}" wx:key="*this">{{ item }}</switch>
<button bindtap="add">添加</button>
<!--js文件-->
add(){
var len = this.data.crr.length +1;
this.data.crr.unshift(len);
this.setData({
crr:this.data.crr
})
}
7.2 二维数组
<view wx:for="{{arr3}}" wx:key="id">
{{item.className}}的学生有:
<text wx:for="{{item.students}}" wx:key="*this" wx:for-item="aaa">{{aaa}}</text>
</view>
<!--
arr3:[{
id:"01",
className:"一班",
students:["张三","李四","王五"]
},{
id:"02",
className:"二班",
students:["刘备","关羽","张飞"]
}],
-->
八、条件渲染
vue
v-if="" v-else-if="" v-else v-show
小程序
wx:if="" wx:elif="" wx:else hidden
<!--单分支-->
<view wx:if="{{ age >= 18 }}">成年</view>
<!--双分支-->
<view wx:if="{{ age >= 18 }}">成年</view>
<view wx:else>未成年</view> -->
<!--多分支-->
<view wx:if="{{ age>=0 && age<14 }}">未成年</view>
<view wx:elif="{{ age>=14 && age<18 }}">青少年</view>
<view wx:elif="{{ age>=18 && age<35 }}">青年</view>
<view wx:elif="{{ age>=35 && age<=120 }}">中年</view>
<view wx:else>年级不合法</view>
<!--hidden-->
操作wxss样式,改变display
<view hidden="{{false}}">这个是显示</view>
<view hidden="{{true}}">这个是隐藏</view>