微信小程序学习笔记
一、环境的搭建
1.Python环境
- 虚拟环境
- django
- drf
- pycharm
2 小程序环境
保存自己的appid
1 | wx2dbe6690cf136f8b |
二、开发小程序
2.1 全局配置
1 | { |
三、flex布局
一种非常方便的布局方式。
在容器中记住4个样式即可。
1 | display: flex; flex布局 |
四、基本操作
1. 跳转
1.1 对标签绑定点击事件
1 | <view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view> |
1 | Page({ |
1.2 页面跳转
1 | wx.navigateTo({ |
跳转到的页面如果想要接受参数，可以在onLoad方法中接受。
redirect.js
1 | Page({ |
1.3 通过标签跳转
1 | <navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator> |
2.数据绑定
1 | <html> |
vue.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<html>
<div id="app">
<div>{{message}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'xx'
}
})
</script>
</html>
2.1 基本显示
wxml
1
<view>数据1：{{message}}</view>
展示数据
1
2
3
4
5
6
7
8
9
10// pages/bind/bind.js
Page({
/**
* 页面的初始数据
*/
data: {
message:"xx",
}
)}
2.2 数据更新
wxml
1
2
3<view>数据2：{{message}}</view>
<button bindtap="changeData">点击修改数据</button>修改数据
1
2
3
4
5
6
7
8
9Page({
data: {
message:"x",
},
changeData:function(){
// 修改数据
this.setData({ message: "xx"});
}
})
3.获取用户信息
方式一
wxml
1
<view bindtap="getUserName">获取当前用户名</view>
js
1
2
3
4
5
6
7
8
9
10
11
12
13getUserName:function(){
// 调用微信提供的接口获取用户信息
wx.getUserInfo({
success: function (res) {
// 调用成功后触发
console.log('success',res)
},
fail:function(res){
// 调用失败后触发
console.log('fail', res)
}
})
},
方式二
wxml
1
<button open-type="getUserInfo" bindgetuserinfo="xxxx">授权登录</button>
js
1
2
3
4
5
6
7
8
9
10
11
12xxxx:function(){
wx.getUserInfo({
success: function (res) {
// 调用成功后触发
console.log('success', res)
},
fail: function (res) {
// 调用失败后触发
console.log('fail', res)
}
})
}
示例
wxml
1
2
3
4
5
6
7<!--pages/login/login.wxml-->
<view>当前用户名：{{name}}</view>
<view>
当前头像：<image src="{{path}}" style="height:200rpx;width:200rpx;"></image>
</view>
<button open-type="getUserInfo" bindgetuserinfo="fetchInfo">获取信息button</button>js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
name:"",
path: "/static/default.png"
},
fetchInfo:function(){
var that = this;
wx.getUserInfo({
success:function(res){
console.log(res);
that.setData({
name:res.userInfo.nickName,
path:res.userInfo.avatarUrl
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})注意事项：
想要获取用户信息，必须经过用户授权（button）。
已授权
不授权，通过调用wx.openSetting
1
2// 打开配置，手动授权。
// wx.openSetting({})
4.获取用户位置信息
wxml
1
<view bindtap="getLocalPath">{{localPath}}</view>
js
1
2
3
4
5
6
7
8
9
10
11data: {
localPath:"请选择位置",
},
getLocalPath:function(){
var that = this;
wx.chooseLocation({
success: function(res) {
that.setData({localPath:res.address});
},
})
},
5. for指令
wxml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>
<view wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="x">
{{idx}} - {{x}}
</view>
</view>
<view>
{{userInfo.name}}
{{userInfo.age}}
</view>
<view>
<view wx:for="{{userInfo}}">{{index}} - {{item}}</view>
</view>js
1
2
3
4
5
6
7data: {
dataList:["goods1","goods2","goods3"],
userInfo:{
name:"name01",
age:18
}
},
6.获取图片
wxml
1
2
3
4
5
6<!--pages/publish/publish.wxml-->
<view bindtap="uploadImage">请上传图片</view>
<view class="container">
<image wx:for="{{imageList}}" src="{{item}}"></image>
</view>js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24data: {
imageList: ["/static/hg.jpg", "/static/hg.jpg"]
},
uploadImage:function(){
var that = this;
wx.chooseImage({
count:9,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success:function(res){
// 设置imageList，页面上图片自动修改。
// that.setData({
// imageList: res.tempFilePaths
// });
// 默认图片 + 选择的图片；
that.setData({
imageList: that.data.imageList.concat(res.tempFilePaths)
});
}
});
},
注意：图片目前只是上传到了内存。
五、用户登录（手机号）
5.1 小程序
数据的双向绑定
- wxml
1
<input value="{{message}}" bindinput="bindTxt" ></input>
- js
1
2
3
4
5
6data: {
phone:"",
},
bindTxt:function(e){
this.setData(e.detail.value);
},网络请求API
1
2
3
4
5
6
7
8
9wx.request({
url: 'http://127.0.0.1:8000/api/login/',
data: { phone:this.data.phone,code:this.data.code},
method:"POST",
success:function(res){
console.log(res);
}
})Request.Params介绍
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18使用Request.Params["id"]来获取参数是一种比较有效的途径。
有三种方式可以进行参数传递:(1). Form (2). ?id= (3).cookie
request.params其实是一个集合，它依次包括request.querystring、request.form、request.cookies和request.servervariables。
如果要在两个页面传递数据的话，只能用request.querystring、request.form、request.cookies
Request.Params 是在 QueryString、Form、Server Variable 以及 Cookies 找数据，他首先在 QueryString 集合查找数据，如果在 QueryString 找到数据，就返回数据，如果没有找到就去 Form 集合中查找数据，找到就返回，否则在往下一下个集合查找数据。
Request.Params["id"] Request.Form["id"] Request.QueryString["id"]的用法以及区别?
Request.Params是所有post和get传过来的值的集合,
Request.Form是取post传值,
Request.QueryString是get传过来的值本地存储操作
1
2
3wx.getStorageSync('userInfo');
wx.setStorageSync('userInfo',"sdfsfd");
wx.removeStorageSync("userInfo")页面调用栈
1
2var pages = getCurrentPages();
prevPage = pages[pages.length-2];跳转回上一个页面
1
wx.navigateBack({});
小程序页面的生命周期
- onLoad（一次）
- onShow（只要展示这个页面，就会自动加载）
- onReady（一次）
- onHide（每次页面隐藏就会自动加载，）
- onUnload（卸载页面，小程序关闭）
全局app.js
1
2
3
4
5
6
7
8
9
10
11
12App({
/**
* 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
*/
onLaunch: function () {
},
globalData:{
userInfo: null,
}
})wx:if指令
5.2 页面传值
1. 父页面向子页面传值
父页面：
1 | /pages/xx/xxx?id=1 |
子页面
1 | onLoad:function(option){ |
2. 子父页面
子页面
1 | var pages = getCurrentPages(); |
注意：data-xx 可以给事件传值。
5.3 腾讯云的对象存储
1. 第一阶段： 文件服务器，将文件存储在某个服务器（目录结构的划分）
2. 第二阶段：
- 文件存储， 将文件存储在某个服务器（目录结构划分）
- 对象存储， 优化存储和结构优化（不支持目录结构划分）
3. 第三阶段：云服务器
- 文件存储
- 对象存储
