微信小程序开发实战（三）

获取和上传图片

publish.wxml

<!--pages/publish/publish.wxml-->
<text>上传图片页面</text>

<view>************************</view>

<button bindtap="uploadImage">请上传图片</button>
<view class="container">
  <image wx:for="{{imageList}}" src="{{item}}" wx:key="key"></image>
</view>

publish.js

// pages/publish/publish.js
Page({
  data: {
    imageList: ["/static/others/iphone7.jpeg", "/static/others/ios.jpeg"]
  },
// 上传图片
  uploadImage: function () {
    var that = this;

    wx.chooseImage({
      count: 9,
      sizeType: ["original", "compressed"],
      sourceType: ["album", "camera"],
      success: function (res) {
        console.log("success:", res);
        // 设置imageList，页面上的图片自动修改
        // that.setData({imageList: res.tempFilePaths});

        // 追加的方式：默认图片 + 选择的图片
        var newImageList = that.data.imageList.concat(res.tempFilePaths);
        that.setData({imageList: newImageList});
      },
      fail: function (res) {
        console.log("fail:", res);
      }
    })
  },
  ...
})

注意：这里只是上传到内存的，页面刷新后就会清掉，要想真实的上传上去，需要有自己的后台服务器来存储，然后将相应的路径修改为服务器存储的路径即可。

数据绑定

双向绑定简单举例

• wxml

<!--pages/telephone/telephone.wxml-->

<view>请输入内容：{{message}} </view>
<input type="text" value="{{message}}" bindinput="bindTxt"></input>

• js

// pages/telephone/telephone.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    message: "路由器莫里有路"
  },

  bindTxt: function (e) {
    console.log(e);
    this.setData({message: e.detail.value});
  },
})

用户登录（手机号）

小程序端

• 数据双向绑定

  • wxml

  <input type="text" value="{{phone}}" bindinput="bindPhone" placeholder="请输入手机号"></input>
  

  • js

  data: {
      phone: ""
  },
  
  bindPhone: function (e) {
     this.setData({phone: e.detail.value});
  },
  

• 网络请求API

参考：微信request

    // 将手机号和验证码发送到后端api
    wx.request({
      url: 'http://127.0.0.1:8000/api/login/',
      data: {
        "phone": phone,
        "code": code
      },
      method: "POST",
      success: (result) => {
        console.log("success:", result);
      },
      fail: (res) => {
        console.log("fail:", res);
      },
    })

注意：在使用 wx.request 等网络请求的API时，需要遵循：

• 网络地址 https
• 小程序管理开发后台需要配置域名
  • 具体配置参考：服务器域名配置

本地测试需要在开发工具的详情“不校验合法域名”打上勾，如下所示：

后端 API

参考：django drf 快速入门

1. 创建虚拟环境

   • 可以通过 miniconda3 来创建一个 python 环境

   conda create -n py37 python=3.7  # py37 为虚拟环境名字，python=3.7 指定版本
   conda activate py37   # 激活虚拟环境来使用
   

2. 在虚拟环境装 django + djangorestframework

   • 基于步骤1，安装

   pip install django
   pip install djangorestframework
   

3. 创建项目和 api

   • 基于步骤2，创建项目和 api

   django-admin startproject miniprogramapi
   django-admin startapp miniapi
   

   • message

   # 1. 获取手机号
   # 2. 校验手机号格式
   
   # 3. 生成随机验证码
   import random
   random_code = random.randint(1000, 9999)
   
   # 4. 验证码发送到手机，购买服务器进行发送短信：阿里云/腾讯云
   # todo: tencent.send_message(phone, random_code)
   # 4.1 注册腾讯云，开通短信云服务
   # 4.2 创建应用，SDK appid: xxx
   # 4.3 申请短信签名，个人：用公众号来申请，ID：xxx，名称：xxx
   # 4.4 申请短信模板，ID：xxx	名称：xxx
   # 4.5 申请密钥：https://console.cloud.tencent.com/cam/capi，
   #   SecretId：xxx，SecretKey：xxx
   # 4.6 调用接口发送短信，SDK，写好的工具：
   #   https://github.com/TencentCloud/tencentcloud-sdk-python/blob/master/examples/sms/v20190711/SendSms.py
   #   pip install tencentcloud-sdk-python
   
   # 5. 验证码 + 手机号 保留（redis 设置 30s 过期）
   # 5.1 搭建 redis 服务
   # 5.2 django 中方便使用 redis 的模块 django-redis 
   #       配置并使用
   

   • login

   class LoginView(APIView):
   '''登录'''
   def post(self, request, *args, **kwargs):
      # 获取参数
      data = request.data
      print("data=", data)
   
      phone = data.get("phone")
      input_code = data.get("code")
      # redis 句柄
      conn = get_redis_connection()
      redis_code = conn.get(phone)
      print("phone:{}, input_code:{}, redis_code:{}".format(phone, type(input_code), type(redis_code)))
   
      if not redis_code:
          return Response({"status": False, "message": "输入的验证码已过期，请重新获取！"})
      
      # 校验输入和redis 的 code 是否一致
      if input_code != redis_code:
          return Response({"status": False, "message": "输入的验证码有误！"})
   
      return Response({"status": True, "message": "登录成功"})
   

内容回顾

组件

• view
• text
• image
• button
• navigtor
• textarea
• input

API

• 用户信息（wx.getUserProfile）
• 地理位置（wx.getLocalPath）
• 选择图片（wx.chooseImage）
• 跳转（wx.navigateTo），非tartar页面才可跳转
• 发送请求（wx.requests），https/后台设置
• 提示框（wx.showToast）

数据绑定

• 数据绑定
  • setData
• 腾讯云发送短信服务
  • 后台配置频率
  • 调用API进行发送

持续更新中......