目录
一、配置项
(1)app.js
(2)app.json
pages
tabBar
(3)sitemap.json
二、语法
(1)模板语法
(2)动态创建和删除
(3)显示和隐藏
(4)遍历
(5)数据绑定
(6)事件绑定
(7)this属性
(8)路由
(9)发送ajax请求
(10)标签
三、组件
前言:微信小程序还是比较简单的,会了vue一个下午就能小程序入门,参照文档开发
入口文件 相当于小程序注册
没有window 没有document 没有dom
可以在里面进行全局配置
pages快速创建页面
写路径后可以快速创建页面文件
index.js
home.json 当前页面 配置文件
html---wxml
css---wxss
可以配置底部导航栏
list 最少2个,最多5个
配置页面是否可以被微信中搜索框得到
类似vue
{{}}里面属于 js的领域
{{10-20}}
{{name}} 需要在js文件中定义数据 ,它是响应式的数据
vue中 v-if="true"
小程序 wx:if="{{true}}"
vue中 v-show="true" (true为显示)
小程序 hidden="{{true}}" (true为隐藏)
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一样防止错乱)
{{i}}:{{"名字:"+item.name+",年龄:"+item.age}}
vue中
小程序 ![]({{imgtest}})
点击
vue中 @clike="handTab"
小程序
bindtap="handTab"
catchtap="handTab" 事件不会冒泡
输入绑定 绑定在输入框中,可以获取输入框的值
bindinput
回调函数通过 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);
},
this.data.XX 可以获取data中数据(只读)
this.setData({}) 可以响应式修改data中数据,本质上不是修改而是重新定义数据,
如果想要在数组后面添加数据,可以用ES6语法 [...list,value] 向一个数组赋值以前的数据和value数据
this.setData({
list:[...this.data.list,value]
})
路由传递字符串或数字类型参数
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(); 可以跳转任意界面,没有返回按钮,有首页按钮
本地后端测试---勾选“不校验合法域名”
// 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
}
})
视图容器
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还可以做滑块页面
详情--评价
事件
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,
})