Get and upload pictures

publish.wxml

<! --pages/publish/publish.wxml-->
<text>Upload picture page</text>

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

<button bindtap="uploadImage">Please upload pictures</button>
<view class="container">
  <image wx:for="{{imageList}}" src="{{item}}" wx:key="key"></image>
</view>
Copy the code

publish.js

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

    wx.chooseImage({
      count: 9.sizeType: ["original"."compressed"].sourceType: ["album"."camera"].success: function (res) {
        console.log("success:", res);
        // Set imageList, and the images on the page are automatically modified
        // that.setData({imageList: res.tempFilePaths});

        // Append mode: default image + selected image
        var newImageList = that.data.imageList.concat(res.tempFilePaths);
        that.setData({imageList: newImageList});
      },
      fail: function (res) {
        console.log("fail:", res); }})},... })Copy the code

Note: here is only uploaded to the memory, after the page refresh will be clear, to the real upload, need to have their own back-end server to store, and then the corresponding path to the server storage path can be modified.

Data binding

This is a simple example of bidirectional binding

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

<view>Please enter: {{message}}</view>
<input type="text" value="{{message}}" bindinput="bindTxt"></input>
Copy the code
  • js
// pages/telephone/telephone.js
Page({

  /** * page initial data */
  data: {
    message: "The router has a way."
  },

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

User login (mobile phone number)

The small program end

  • Data bidirectional binding

    • wxml
    <input type="text" value="{{phone}}" bindinput="bindPhone" placeholder="Please enter your mobile phone number."></input>
Copy the code
    • js
    data: {
    phone: ""
},

bindPhone: function (e) {
   this.setData({phone: e.detail.value});
},
Copy the code

  • Network Request API

Reference: wechat Request

/ / the phone number and the verification code sent to the backend API wx. The request ({url: 'http://127.0.0.1:8000/api/login/' data: {" phone ": the phone," code ": code }, method: "POST", success: (result) => { console.log("success:", result); }, fail: (res) => { console.log("fail:", res); }})Copy the code

Note: When using network request apis such as WX.Request, follow the following instructions:

  • Network address HTTPS
  • Small program management development background needs to configure domain name
    • For details, see server domain name configuration

The local test requires checking “do not verify legitimate domain name” in the development tool details, as shown below:

The backend API

Reference: Django DRF Quick Start

  1. Creating a virtual environment

    • You can create a Python environment with Miniconda3
    Conda create -n py37 Python =3.7# py37 specifies the name of the virtual environment where Python =3.7 specifies the version
conda activate py37   Activate the virtual environment to use
Copy the code

  2. Install django + djangorestframework in your virtual environment

    • Based on Step 1, install
    pip install django
pip install djangorestframework
Copy the code

  3. Create the project and API

    • Based on Step 2, create the project and API
    django-admin startproject miniprogramapi
django-admin startapp miniapi
Copy the code
    • message
    # 1. Get the phone number
# 2. Verify the phone number format

# 3. Generate random verification codes
import random
random_code = random.randint(1000.9999)

# 4. Send the verification code to the mobile phone, and purchase the server to send the SMS: Ali Cloud/Tencent Cloud
# todo: tencent.send_message(phone, random_code)
Sign up for Tencent Cloud and open SMS cloud service
# 4.2 Create application, SDK appID: XXX
# 4.3 Apply for SMS signature, personal: apply with public number, ID: XXX, name: XXX
# 4.4 Apply for SMS template, ID: XXX Name: XXX
# 4.5 application keys: https://console.cloud.tencent.com/cam/capi,
# SecretId: XXX, SecretKey: XXX
# 4.6 Call the interface to send SMS, SDK, written tools:
# https://github.com/TencentCloud/tencentcloud-sdk-python/blob/master/examples/sms/v20190711/SendSms.py
# pip install tencentcloud-sdk-python

# 5. Keep the verification code + phone number (redis set to expire 30s)
# 5.1 Set up redis service
# 5.2 Django-Redis is a django module that makes redis easy to use
# Configure and use
Copy the code
    • login
    class LoginView(APIView) :
"' log in ' ' '
def post(self, request, *args, **kwargs) :
   # Get parameter
   data = request.data
   print("data=", data)

   phone = data.get("phone")
   input_code = data.get("code")
   # redis handle
   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": "The verification code you entered has expired, please get it again!"})
   
   Check whether the input is consistent with redis code
   ifinput_code ! = redis_code:return Response({"status": False."message": "Incorrect captcha!"})

   return Response({"status": True."message": "Login successful"})
Copy the code

Review the content

component

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

API

  • User information (wX.getUserProfile)
  • Location (wx.getLocalPath)
  • Select image (wx.chooseImage)
  • Jump to (wX.navigateto), non-tartar pages can jump to
  • Send requests (WX. requests), HTTPS/background Settings
  • Prompt box (WX.showtoast)

Data binding

  • Data binding
    • setData
  • Tencent Cloud messaging service
    • Background Configuration frequency
    • Call the API to send

Keep updating……