微信小程序学习总结
目录
微信小程序学习总结
目录
一、配置项
前言：微信小程序还是比较简单的，会了vue一个下午就能小程序入门，参照文档开发
（1）app.js
入口文件 相当于小程序注册
没有window 没有document 没有dom
（2）app.json
可以在里面进行全局配置
pages
pages快速创建页面
写路径后可以快速创建页面文件
index.js
home.json 当前页面 配置文件
html—wxml
css—wxss
tabBar
可以配置底部导航栏
list 最少2个，最多5个
（3）sitemap.json
配置页面是否可以被微信中搜索框得到
二、语法
（1）模板语法
类似vue
{{}}里面属于 js的领域
<view>{{10-20}}</view>
{{name}} 需要在js文件中定义数据 ，它是响应式的数据（2）动态创建和删除
vue中 v-if="true"
小程序 wx:if="{{true}}"（3）显示和隐藏
vue中 v-show="true" （true为显示）
小程序 hidden="{{true}}" (true为隐藏)（4）遍历
vue中 v-for="(item,i) in array" 或者 v-for="item in array" :key=item.id
小程序中 wx:for="{{array}}" wx:for-item="item" wx:for-index="i" wx:key="i" (key和vue中key一样防止错乱)
<view wx:for="{{array}}" wx:for-item="item" wx:for-index="i" wx:key="i">
<view>{{i}}:{{"名字："+item.name+",年龄："+item.age}}</view>
</view>（5）数据绑定
vue中 <img :src="imgtest">
小程序 <img src="{{imgtest}}">（6）事件绑定
点击
vue中 @clike="handTab"
小程序
bindtap="handTab"
catchtap="handTab" 事件不会冒泡
输入绑定 绑定在输入框中,可以获取输入框的值
bindinput
<input bindinput="bindInput"></input>
回调函数通过 e.detail.value 获取输入框的值
bindInput(e){
console.log(e.detail.value);
this.setData({
value: e.detail.value
})
},事件回调
this.setData({}) 可以修改data中数据，也可以动态添加一个数据
handTab(){
this.setData({
name2:"www"
})
},
向回调函数中传递参数
使用 data-xx
例如
catchtap="handTab" data-i="{{12}}"
handTab(e){
log("获得参数：",e.currentTarget.dataset.i);
},（7）this属性
this.data.XX 可以获取data中数据(只读)
this.setData({}) 可以响应式修改data中数据，本质上不是修改而是重新定义数据，
如果想要在数组后面添加数据，可以用ES6语法 [...list,value] 向一个数组赋值以前的数据和value数据
this.setData({
list:[...this.data.list,value]
}) （8）路由
路由传递字符串或数字类型参数
<button bindtap="To" data-msg="{{'跳转成功'}}"> 跳转页面</button>
To(e){
console.log("发出数据：",e.currentTarget.dataset.msg);
wx.reLaunch({
url: `/pages/ler/ler?msg=${e.currentTarget.dataset.msg}`
})
},接收数据(只能在onLoad 钩子中接收)
onLoad(options) {
console.log("跳转成功");
console.log("收到数据：",options.msg);
this.setData({
msg:options.msg
})
},路由传递对象或数组类型
通过 JSON.stringify(Obj) 把对象转换成 JOSN串
解析 JSON.parse(options.msg) 把接收过来的JSON串解析成 对象数据
例子：
发送
To(e){
console.log("发出数据：",this.data.array);
wx.reLaunch({
url: `/pages/ler/ler?msg=${ JSON.stringify(this.data.array) }`
})
},
接收
onLoad(options) {
console.log("跳转成功");
console.log("收到数据：",options.msg);
this.setData({
msg:JSON.parse(options.msg)
});
console.log("数据：",this.data.msg);
},路由跳转方式：
wx.navigateTo() ; 跳转后有返回键(当前页面会被保留)，不可以跳转到tabBar页面
wx.redirectTo(); 只能跳转tabBar页面，没有返回按钮，有首页按钮
wx.switchTab(); 没有返回键，只能跳转到taBar页面，不能传递参数
wx.reLaunch(); 可以跳转任意界面，没有返回按钮，有首页按钮（9）发送ajax请求
本地后端测试—勾选“不校验合法域名”
// key-value形式传输数据 (后端使用 @PathParam接收参数)
wx.request({
url:'http://192.168.1.4:8080/POST',
method: 'POST', //请求方式
header: {
'Content-Type': 'application/x-www-form-urlencoded' //key-value形式
},
data: {
name: "小王",//参数
age:17
},
success: function(res) { //成功回调
console.log(res.data); //数据
},
fail: function() { //失败回调
app.consoleLog("请求数据失败");
},
complete: function() {
// complete
}
})
//json格式传输数据后端使用(@RequestBody接收)
wx.request({
url:'http://192.168.1.4:8080/POST2',
method: 'POST', //请求方式
header: {
'Content-Type': 'application/json' //json串形式
},
data: {
name: "小王",//参数
age:17
},
success: function(res) {
console.log(res.data); //数据
},
fail: function() {
app.consoleLog("请求数据失败");
},
complete: function() {
// complete
}
})
（10）标签
视图容器
view 视图容器
scroll-view 可滚动视图容器
swiper 轮播图容器
基础组件
icon 图标
text 文字
progress 进度条
表单元素
button 按钮 (size属性设置大小)
form 表单
input 输入框 (默认只有一个黑线 ， 需要wxss设置大小，可以绑定bindinput输入事件)
chaeckbox 多选框
radio 单选框
picker 列表选择器
slider 滑动选择器
switch 开关选择器
label 标签
反馈类型
action-sheet 上拉菜单
modal 模态弹窗
progress 进度条’
toast 短通知
导航
navigator 应用内跳转
多媒体
audio 音频
image 图片
video 视频
地图
map 地图
画布
canvas
三、组件
（1） swiper 轮播图
w文档：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
<swiper indicator-dots="true" >
<swiper-item >
<image src="../../static{{list.url}}"></image>
</swiper-item>
<swiper-item >
<image src="../../static{{list.url}}"></image>
</swiper-item>
<swiper-item >
<image src="../../static{{list.url}}"></image>
</swiper-item>
</swiper> swiper还可以做滑块页面
详情--评价
事件
bindchange 当前页面轮播切换发生的事件
回调函数中可以获取到
e.detail.current 当前页面的索引 ，(通过回调改变current，不会陷入循环；这个事件是监听滑屏改变current)
属性
current 当前轮播的索引，可以通过改变当前值来改变轮播页面
点击轮播图 全屏展示图片
wx.previewImage({
current:e.currentTarget.dataset.img, //点击显示的图形
urls: this.data.dipe.slides.map(item=>`http://localhost:3000${item}`), //图片组(这里写了es6)
})配置页面属性
上条导航栏名字
wx.setNavigationBarTitle({
title: this.data.dipe.name,
})