一、雙向系結
首先新建pages/telephone/telephone檔案夾，
在pages/telephone/telephone.wxml中輸入以下代碼：
<text>你輸入的是:{{message}}</text>
<input value="{{message}}" bindinput="bindtxt"></input>為了讓輸入框有邊框，所以在pages/telephone/telephone.wxss中輸入：
input{
border: 1rpx solid #ddd;
}然后在 pages/telephone/telephone.js 輸入：
data: {
message:''
},
bindtxt:function(e){
this.setData({message:e.detail.value})
},效果如下：
二、后端介面撰寫
參考基于Anaconda搭建Django環境該文章新建CommunicateTest專案，
然后打開anaconda prompt，輸入：
activate Django然后進入該專案目錄下：
cd E:\workspace\wexinapp\CommunicateTest然后輸入以下代碼，生成檔案夾，
python manage.py startapp api然后做路由分發，在在ComunicateTest/urls.py檔案中包含api/urls模塊，修改后ComunicateTest/urls.py檔案如下：
from django.contrib import admin
from django.urls import include, path
urlpatterns = [
path('api/', include('api.urls')),
path('admin/', admin.site.urls),
]打開api/views.py，輸入以下代碼：
from django.shortcuts import render
from rest_framework.views import APIView
# Create your views here.
from django.http import HttpResponse
from rest_framework.response import Response
class LgoinView(APIView):
def post(self,request,*args,**kwargs):
print(request.data)
return Response({"status":True})
def index(request):
return HttpResponse("Hello, world. Yunlord.")新建api/urls.py，輸入：
from django.urls import path
from . import views
#
# urlpatterns = [
# path('', views.index, name='index'),
# ]
urlpatterns = [
path('', views.LgoinView.as_view()),
]在CommunicateTest/settings.py中添加：
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
"rest_framework",
]
在Anaconda Prompt執行以下命令：
python manage.py runserver在瀏覽器中訪問http://localhost:8000/api/，
三、小程式端通信撰寫
在pages/telephone/telephone.wxml中輸入以下代碼：
<view>手機號：</view>
<input value="{{phone}}" bindinput="bindPhone" placeholder="請輸入手機號"></input>
<view>驗證碼:<text>點擊獲取驗證碼</text></view>
<input value="{{code}}" bindinput="bindCode" placeholder="請輸入驗證碼" ></input>
<button bindtap="login">登錄</button>然后在 pages/telephone/telephone.js 輸入：
data: {
message:'',
code:'',
phone:''
},
bindPhone:function(e){
this.setData({phone:e.detail.value})
},
bindCode:function(e){
this.setData({code:e.detail.value})
},
login:function(){
console.log(this.data.code,this.data.phone)
//將手機和驗證碼發送到后端，后端進行登錄，
wx.request({
url: 'http://localhost:8000/api/',
data: {phone:this.data.phone,code:this.data.code},
method: 'Post',
success: function(res){
console.log(res)
},
})
},效果如下：
點擊登錄，可以在anaconda Prompt中實作通信，
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/340470.html
標籤：其他
上一篇：在時間序列資料中插入行作為分隔符
下一篇：回圈與二分法。