目录
一、配置项
前言：微信小程序还是比较简单的，会了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,
})
801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
