Python3 - 三天学会微信小程序（Python后端研习）
文章目录
- 一、day01微信小程序
-
- 1. 问题
- 2. 环境的搭建
-
- 2.1 Python环境
- 2.2 小程序环境
-
- 2.2.1 申请一个微信公众平台
- 2.2.2 保存自己的appid
- 2.2.3 下载开发者工具
- 2.2.4 创建项目
- 3. 开发小程序
-
- 3.1 全局配置
- 3.2 组件
-
- 3.2.1 text
- 3.2.2 view
- 3.2.3 image
- 3.3 样式
-
- 3.3.1
- 4. flex布局
- 5. 实战
- 二、day02微信小程序
-
- 内容回顾
- 今日概要
- 今日内容
-
- 1. 跳转
-
- 1.1 标签绑定点击事件
- 1.2 页面跳转
- 1.3 通过标签跳转
- 2. 数据绑定
-
- 2.1 基本显示
- 2.2 数据更新
- 3. 获取用户信息
-
- 方式一
- 方式二
- 4. 获取用户的位置信息
- 5. for指令
- 6. 获取图片
- 总结
- 作业
- 三、day03微信小程序
-
- 今日概要
- 今日详情
-
- 1. 数据绑定
- 2.用户登录
- day04微信小程序
-
- 今日概要
- 今日详情
-
- 1. 用户登录
-
- 1.1 发送短信
- 1.2 登录
- day05功能卡法
-
- 今日概要
- 今日详细
-
- 1. 页面传值
-
- 1.1 父页面向子页面传值
- 1.2 子页面向父页面传值
- 作业：
-
- 1.发布状态
-
- 1.1组件：进度条
- 1.2 修改data中的局部数据
- 1.3 闭包
- 2.列表查看
-
- 2.1 瀑布流
今天是一年一度的1024程序员节，祝大家节日快乐。前面半年我一直在研究Python和Linux相关技术，最近有需要写微信小程序的需求，为此花点时间学了下，很容易就上手了，大家不防一试。
一、day01微信小程序
1. 问题
-
什么是微信小程序
- 移动互联网时代，手机 - 手机软件，在手机中安装很多软件 - 腾讯和阿里（只安装自己不用别人） - 腾讯：微信 + N小程序 - 阿里：支付宝 + N小程序 -
为什么要做小程序？
微信用户基数大 在微信上用我们小程序比较便捷 -
如何开发小程序？
- 小程序：学习微信开发的语言（前段html、css、js、vue.js）
- 微信开发者工具
- API： restful接口（Python + flask + flask_restful）
- Pycharm
- 小程序：学习微信开发的语言（前段html、css、js、vue.js）
2. 环境的搭建
2.1 Python环境
- 虚拟环境
- flask
- flask_restful
- Pycharm
2.2 小程序环境
2.2.1 申请一个微信公众平台
2.2.2 保存自己的appid
appid：wxff2dd22b6fb5a253
2.2.3 下载开发者工具
2.2.4 创建项目
3. 开发小程序
3.1 全局配置
{
"pages": [
"pages/index/index",
"pages/logs/index"
],
"window": {
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "PDF转换器",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"enablePullDownRefresh": false
},
"tabBar": {
"selectedColor": "#CD5C5C",
"list": [{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "static/tabbar/[email protected]",
"selectedIconPath": "static/tabbar/[email protected]"
}, {
"pagePath": "pages/logs/index",
"text": "日志",
"iconPath": "static/tabbar/[email protected]",
"selectedIconPath": "static/tabbar/[email protected]"
}]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true
}
3.2 组件
3.2.1 text
编写文本信息，类似于span
3.2.2 view
容器，类似于div标签
3.2.3 image
图片
3.3 样式
3.3.1
- px
- rpx，750rpx
4. flex布局
一种非常方便的布局方式。
在容器中记住4个样式即可。
display: flex; flex布局
flex-direction: column; 规定主轴水平方向：row/column
justify-content: space-around; 在主轴方向如何展示：flex-start/flex-end/center/space-around/space-between/space-evenly
align-items: flex-end; 在副轴方向如何展示： flex-start/center/space-around/space-between/space-evenly
5. 实战
二、day02微信小程序
内容回顾
- 环境搭建
- 全局配置
- pages
- window
- tabbar
- 页面
- json
- js
- wxml
- wxss
- flex布局
- display：flex
- flex-direction： row、column
- justify-content
- align-item
- 小程序开发
- 标签（组件）
- text
- view
- image
- 样式
- rpx 默认750rpx
- 标签（组件）
今日概要
- 指令
- api
- 页面
今日内容
1. 跳转
1.1 标签绑定点击事件
<view bindtap="clickMe" data-nid="123" data-name="harry">点我跳转view>
Page({
/**
* 点击绑定的时间
*/
clickMe(e) {
var nid = e.currentTarget.dataset.nid
// String *harry = e.currentTarget.dataset.name
console.log(nid)
// 跳转
wx.navigateTo({
url: '/pages/redirect/redirect?id='+nid,
})
}
)}
1.2 页面跳转
// 跳转
wx.navigateTo({
url: '/pages/redirect/redirect?id='+nid,
})
跳转到的界面如果想要接收参数，可以在onload方法中接收
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
console.log(options.id)
},
)}
注意事项：只能跳转到非tabbar的界面
1.3 通过标签跳转
跳转到新界面
2. 数据绑定
2.1 基本显示
-
wxml
当前头像： 当前用户名:{{name}} 获取当前用户 -
展示数据
/** * 页面的初始数据 */ data: { message: "你好呀，哈哈", name: "", avatarUrl: "/static/222.png" },
2.2 数据更新
changeData() {
// 获取数据
console.log(this.data.message)
// 修改数据 错误的方式，这样只能改后端
// this.data.message = "222"
// 修改数据
this.setData({message: "嗨，你好呀"})
},
3. 获取用户信息
方式一
- wxml
<view bindtap="getUserName">获取当前用户view>
- js
getUserName() {
var that = this
console.log('获取当前用户信息')
// 调用微信的接口， 获取用户信息
wx.getUserInfo({
success: function(res) {
// 调用成功后触发
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
console.log('success', avatarUrl)
that.setData({
name: nickName,
avatarUrl: avatarUrl
})
},
fail:function(res){
// 调用失败后触发
console.log('fail', res)
}
})
},
方式二
- wxml
<button open-type="getUserInfo" bindgetuserinfo="fetchInfo">获取信息buttonbutton>
- js
// pages/login/login.js
Page({
/**
* 页面的初始数据
*/
data: {
name: "",
avatarUrl: "/static/222.png"
},
fetchInfo:function() {
var that = this
console.log('获取当前用户信息')
// 调用微信的接口， 获取用户信息
wx.getUserInfo({
success: function(res) {
// 调用成功后触发
var userInfo = res.userInfo
var nickName = userInfo.nickName
var avatarUrl = userInfo.avatarUrl
var gender = userInfo.gender //性别 0：未知、1：男、2：女
var province = userInfo.province
var city = userInfo.city
var country = userInfo.country
console.log('success', avatarUrl)
that.setData({
name: nickName,
avatarUrl: avatarUrl
})
},
fail:function(res){
// 调用失败后触发
console.log('fail', res)
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
注意事项：
-
想要获取用户信息，必须经过用户授权（button）
-
已授权
-
不授权，通过调用wx.opensettings
// 打开配置，手动授权 wx.openSetting({})
4. 获取用户的位置信息
getLocalPath:function() {
var that = this
wx.chooseLocation({
success:function(res){
console.log(res)
that.setData({
localpath: res.address
})
}
})
},
app.json
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将被展示在小程序"
}
},
"requiredPrivateInfos": [
"getLocation"
]
5. for指令
<text>商品列表text>
<view>----------------------------view>
<view>
<view wx:for="{{dataList}}">{{index}}-{{item}}view>
view>
<view>----------------------------view>
<view>
{{userInfo.name}}
{{userInfo.age}}
view>
<view>----------------------------view>
<view>
<view wx:for="{{userInfo}}">{{index}}:{{item}}view>
view>
js
/**
* 页面的初始数据
*/
data: {
dataList: ["小明", "harry", "小花"],
userInfo: {
name: "harry",
age: 18
}
},
6. 获取图片
-
wxml
<text bindtap="uploadImage">请上传图片text> <view class="container"> <image wx:for="{{imageList}}" src="{{item}}">image> view> -
js
uploadImage:function(){ var that = this wx.chooseImage({ count: 6, sizeType: ["original", "compressed"], sourceType: ["album","camera"], success: (res) => { console.log(res) // 默认图片 + 新选择图片 that.setData({ imageList: that.data.imageList.concat(res.tempFilePaths) }) }, fail: (res) => { console.log(res) }, complete: (res) => { console.log(res) }, }) },
注意：图片目前只是上传到内存。
总结
-
标签（组件）
- text
- view
- image
- navigator，跳转到其他页面（非tabbar页面）
- button
-
时间
-
bindtap
<view bindtap="func">view> <view bindtap="func" data-xx="123">view>func:function(e){ e.currentTarget.dataset }
-
-
api
- navigateTo
wx.navigateTo({ url: '/pages/redirect/redirect?id='+nid, })- openSetting
wx.openSetting()- getUserInfo
wx.getUserInfo({ success: function(res) { } })- chooseLocation
wx.chooseLocation({ success:function(res){ } })- chooseImage
wx.chooseImage({ count: 6, sizeType: ["original", "compressed"], sourceType: ["album","camera"], success: (res) => { } }) -
数据绑定
-
for指令
注意：setData + that
作业
1.拍卖详细页面
-
拍卖列表页面通过for循环+后端数据展示信息
-
点击拍卖列表中的某项拍卖时，需要将自己的id传递给拍卖详细页面
2.发布消息的页面
- 上传图片
- 选择位置
<textarea>textarea>
三、day03微信小程序
今日概要
- 小程序
- 后端api
今日详情
1. 数据绑定
- 基本绑定
- for循环
双向绑定
2.用户登录
day04微信小程序
今日概要
- 用户登录、注册
- 发布心情
- 图片上传
- 查看心情
- 查看心情详情
今日详情
1. 用户登录
1.1 发送短信
1.2 登录
-
小程序公共对象
-
App.js
App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { var userInfo = wx.getStorageSync('userInfo') if (userInfo){ this.globalData.userInfo = userInfo } }, globalData:{ userInfo: null }, initUserInfo:function(res, localUser){ console.log(localUser.nickName) var info = { token: res.token, phone: res.phone, nickName: localUser.nickName, avatarUrl: localUser.avatarUrl } console.log(info) // 获取公共app, 赋值， 全局变量赋值 this.globalData.userInfo = info // {phone:xxx, token:xxx} // 在本地存储值 wx.setStorageSync('userInfo', info) }, delUserInfo:function(){ this.globalData.userInfo = null wx.removeStorageSync('userInfo') } })- 其他页面
var app = getApp() Page({ /** * 页面的初始数据 */ data: { userInfo:null }, /** * 生命周期函数--监听页面显示(每次都执行) */ onShow() { this.setData({ userInfo: app.globalData.userInfo }) }, /** * 用户注销 */ onClickLogout:function(){ app.globalData.userInfo = null wx.removeStorageSync('userInfo') this.setData({ userInfo:null }) } })注意：修改globalData之后， 其他页面已用的值不会自动变化，而是需要手动设置。
-
-
本地存储
wx.getStorageSync('userInfo') wx.setStorageSync('userInfo', info) wx.removeStorageSync('userInfo') -
页面调用栈
var pages = getCurrentPages() prevPage = pages[pages.length-2] -
跳回上一个页面
wx.navigateBack({}) -
小程序页面的生命周期
- onLoad（一次）
- onShow（只要展示这个界面，就会自动加载）
- onReady（一次）
- onUnload（卸载， 小程序关闭时）
- onHide（当小程序从前台进入后台，会触发 onHide， A界面跳转到B界面， A执行onHide）
- onShow（当小程序启动，或从后台进入前台显示，会触发 onShow）
- onError（当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息）
- onPullDownRefresh（下拉刷新）
- onReachBottom（上拉加载）
- onShareAppMessage（用户点击右上角分享）
-
全局app.js
App({ /** * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次） */ onLaunch: function () { var userInfo = wx.getStorageSync('userInfo') if (userInfo){ this.globalData.userInfo = userInfo } }, globalData:{ userInfo: null } }) -
wx:if指令
day05功能卡法
今日概要
- 页面传值
- 临时秘钥上传文件
今日详细
1. 页面传值
1.1 父页面向子页面传值
父页面：
/pages/xx/xxx?id=1
子页面：
onLoad:function(){
}
1.2 子页面向父页面传值
子页面：
/**
* 选择话题事件
*/
chooseTopic:function(e){
var topicInfo = e.currentTarget.dataset.xx
var pages = getCurrentPages()
var prevPage = pages[pages.length-2]
// prevPage.setData({ topicText: topicInfo.title })
prevPage.setTopicData(topicInfo)
// 把这个值传给父界面
wx.navigateBack({})
},
注意：data-xx可以给事件传值
作业：
1.发布状态
1.打开图片进行本地预览
2.将本地图片上传到云
3.输入文字 & 选择相应信息
4.发布：
必须上传完毕之后， 才允许点击发布按钮
1.1组件：进度条
<progress percent="{{precent1}}" >progress>
<progress percent="{{precent2}}" activeColor="#DC143C">progress>
1.2 修改data中的局部数据
/**
* 页面的初始数据
*/
data: {
imageList:[
{id:1, title:'pic1', precent: 20 },
{id:2, title:'pic2', precent: 40 },
{id:3, title:'pic3', precent: 60 }
],
precent1:20,
precent2:50
},
/**
* 修改百分比
*/
changePercent:function(){
var num = 2
this.setData({
["imageList[0].precent"]:80,
["imageList[" + num + "].precent"]:90,
["imageList[3].title"]:"哈哈哈"
})
},
<view wx:for="{{imageList}}">
<view>{{item.title}}view>
<progress percent="{{item.precent}}" >progress>
view>
<button bindtap="changePercent">更新button>
1.3 闭包
/**
* 闭包
*/
bibaoAction:function(){
// 闭包1
var dataList = [11, 2, 45]
for (var i in dataList) {
function v1(data){
wx.request({
url: 'xx',
success:function(res){
console.log(i)
}
})
}
v1(dataList[i])
}
// 闭包2
for (var i in dataList) {
(function(data){
wx.request({
url: 'xx',
success:function(res){
console.log(i)
}
})
})(dataList[i])
}
},
2.列表查看
全局配置下拉刷新, app.json
"window": {
"enablePullDownRefresh": True
},
局部下拉刷新， xxx.json
{
"usingComponents": {},
"enablePullDownRefresh": true
}
2.1 瀑布流
-
方式1：自己构造
<view style="width:50%"> view> <view style="width:50%"> view> -
方式2：设置样式css
<view class="container"> <view class="item"> <image mode="widthFix" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2F%2Fpic%2F5%2F8d%2F5f31a37412.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664420148&t=2d54b8c73bb16e55720d4219ac4013d8">image> view> <view class="item"> <image mode="widthFix" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp6.itc.cn%2Fimages01%2F20200731%2Feafbff9ae5e94f939ab41097518a23c1.jpeg&refer=http%3A%2F%2Fp6.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1664420148&t=878daea64d40ea5f0dd900121dd635ae">image> view> view>/* pages/news2/news2.wxss */ .container{ -moz-column-count: 2; /* 分为两列 */ -webkit-column-count: 2; column-count: 2; -moz-column-gap: 20rpx; -webkit-column-gap: 20rpx; columns-gap: 20rpx } .container .item{ break-inside: avoid-column; -webkit-column-break-inside: avoid; } .container .item .image{ width: 100%; display: block; }