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

获取和上传图片

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>
复制代码

// 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>
复制代码

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 快速入门

创建虚拟环境

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

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

在虚拟环境装 django + djangorestframework
- 基于步骤1，安装
```
pip install django
pip install djangorestframework
复制代码
```

创建项目和 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 
#       配置并使用
复制代码

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": "登录成功"})
复制代码