Python3 - 三天学会微信小程序（Python后端研习）

Posted 2023-02-04 韩俊强

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python3 - 三天学会微信小程序（Python后端研习）相关的知识，希望对你有一定的参考价值。

文章目录

一、day01微信小程序
二、day02微信小程序
三、day03微信小程序
day04微信小程序
day05功能卡法

今天是一年一度的1024程序员节，祝大家节日快乐。前面半年我一直在研究Python和Linux相关技术，最近有需要写微信小程序的需求，为此花点时间学了下，很容易就上手了，大家不防一试。

一、day01微信小程序

1. 问题

什么是微信小程序

- 移动互联网时代，手机
- 手机软件，在手机中安装很多软件
- 腾讯和阿里（只安装自己不用别人）
	- 腾讯：微信 + N小程序
	- 阿里：支付宝 + N小程序

为什么要做小程序？

微信用户基数大
在微信上用我们小程序比较便捷

如何开发小程序？
- 小程序：学习微信开发的语言（前段html、css、js、vue.js）
  - 微信开发者工具
- API： restful接口（Python + flask + flask_restful）
  - Pycharm

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/tabbar_news_30x30_@2x.png",
      "selectedIconPath": "static/tabbar/tabbar_news_sel_30x30_@2x.png"
    , 
      "pagePath": "pages/logs/index",
      "text": "日志",
      "iconPath": "static/tabbar/tabbar_news_30x30_@2x.png",
      "selectedIconPath": "static/tabbar/tabbar_news_sel_30x30_@2x.png"
    ]
  ,
  "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 通过标签跳转

<navigator url="/pages/redirect/redirect?id=666">跳转到新界面</navigator>

2. 数据绑定

2.1 基本显示

wxml

<view>
当前头像：
<image src="avatarUrl" style="height: 200rpx; width: 200rpx;"></image>
</view>
<view>当前用户名:name</view>
<view bindtap="getUserName">获取当前用户</view>

展示数据

  /**
   * 页面的初始数据
   */
  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>

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">获取信息button</button>

// 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指令

<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>----------------------------</view>
<view>
  <view wx:for="dataList">index-item</view>
  <!-- index 和 item别名 -->
  <!-- <view wx:for="dataList" wx:for-index="idx" wx:for-item="itemName">idx-itemName</view> -->
</view>

<view>----------------------------</view>

<view>
  userInfo.name
  userInfo.age  
</view>

<view>----------------------------</view>

<view>
  <view wx:for="userInfo">index:item</view>
</view>

  /**
   * 页面的初始数据
   */
  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>

  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(Python3 - 三天学会微信小程序（Python后端研习）
 微信小程序从入门到学会第七天-小程序的自定义组件
 微信小程序三分钟学会小程序的条件渲染
 微信小程序入门到精通— AppID和个性配置你学会了么？
 一名Android开发者的微信小程序填坑之路
 ❤️微信小程序 云开发 教程合集（视频+图文）免费❤️