- Liên kết dữ liệu hai chiều:
xx. wxml
<view>Bạn đã nhập: {{ message }}</view>
<input type="text" value="{{ message }}" bindinput="handleInput"/>
xx.js
Page({
/**
* Dữ liệu ban đầu của trang
*/
data: {
message: "liên kết hai chiều"
},
/**
* Cập nhật dữ liệu theo thời gian thực
*/
handleInput: function(res){
console.log(res.detail.value)
this.setData({message: res.detail.value})
},
- Gửi yêu cầu mạng từ mini program:
Lưu ý: Trong môi trường phát triển cục bộ, cần bật "Không kiểm tra tên miền hợp lệ" trong cài đặt địa phương của WeChat Mini Program.
- xx.wxml
<!--pages/telphone/telphone.wxml-->
<text>pages/telphone/telphone.wxml</text>
<view>Số điện thoại:</view>
<input type="text" value="{{ phone }}" bindinput="handlePhone" placeholder="Nhập số điện thoại"/>
<view>Mã xác minh: <text>Nhấn để nhận mã</text></view>
<input type="text" value="{{ code }}" bindinput="handleCode" placeholder="Nhập mã xác minh"/>
<button bindtap="performLogin">Đăng nhập</button>
- xx.js
Page({
/**
* Dữ liệu ban đầu của trang
*/
data: {
phone: "",
code: ""
},
/**
* Cập nhật số điện thoại
*/
handlePhone: function(res){
console.log(res.detail.value)
this.setData({phone: res.detail.value})
},
handleCode: function(res){
this.setData({code: res.detail.value})
},
performLogin: function(){
console.log(this.data.phone, this.data.code)
// Gửi số điện thoại và mã xác minh đến server
wx.request({
url: 'http://127.0.0.1:8000/api/login/',
data: {phone: this.data.phone, code: this.data.code},
method: 'POST',
timeout: 0,
success: (result) => {
console.log(result)
},
})
},
- Xây dựng API phía backend:
3.1. Tạo thư mục mới tên là auction và cấu hình môi trường ảo Python
3.2. Cài đặt Django: pip install django
3.3. Khởi tạo dự án Django: django-admin startproject auction . (Lưu ý khoảng trắng và dấu chấm)
3.4. Tạo ứng dụng mới: python manage.py startapp api
3.5. Cấu hình đường dẫn chính - auction/urls.py:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls')),
]
3.6. Tạo file api/urls.py và định nghĩa các route con:
from django.urls import path, include
from api import views
# Đặt không gian tên cho ứng dụng
app_name = 'api'
urlpatterns = [
path('login/', views.LoginView.as_view(), name='login'),
]
3.7. Viết view đăng nhập - auction/views.py:
from django.shortcuts import render
from rest_framework.views import APIView
from rest_framework.response import Response
# Tạo view của bạn ở đây.
class LoginView(APIView):
def post(self, request, *args, **kwargs):
print(request.data)
return Response({"status": True})
3.8. Thêm app mới và rest_framework vào settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'rest_framework',
'api',
]
3.9. Cấu hình cơ sở dữ liệu, ngôn ngữ và múi giờ:
DATABASES = {
'default': {
# Chỉ định loại cơ sở dữ liệu
'ENGINE': 'django.db.backends.mysql',
'HOST': '127.0.0.1',
'PORT': '3306',
'NAME': 'mysite',
'USER': 'root',
'PASSWORD': 'xxxxx',
}
}
LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'
USE_I18N = True
USE_TZ = True