一 html的数据绑定
<html> ... <div id="content"></div> <script> var name = "学习数据绑定"; $('#content').val(name); </script> </html>
二 vue.js数据绑定
<html>
<div id="app">
<div>{{message}}</div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '学习vue.js数据绑定'
}
})
</script>
</html>
三 微信小程序的数据绑定
***.wxml <text>数据绑定</text> <view>数据：{{message}}</view> <button bindtap="changeVal">点击改变数据</button>
Page({ /** * 页面的初始数据 */ data: { message:'学习小程序数据绑定' }, changeVal:function(){ console.log(this.data.message) // 一般情况下改变数据 但是这种方法只能改变js 不能改变前端页面 this.data.message ="学习数据小程序绑定" console.log(this.data.message) // 下面改前端页面 this.setData({ message: "学习小程序数据绑定"}) }, })
四 微信小程序-双向绑定
<view>您输入了：{{message}}</view>
<input value="{{message}}" bindinput="bindText"></input>
value="{{message}}与上面的view联动 但是现在是单向的联动
bindinput="bindText"是双向联动
Page({ /** * 页面的初始数据 */ data: { message:"学习双向绑定", },
// 定义上面的函数 bindText:function(e){ this.setData({ message: e.detail.value}) }, })
示例 登陆小例子
注意：示例中的手机号和验证码是自己输入的 不通过服务商
小程序前端
***.wxml
<view>手机号</view> <input value="{{phone}}" bindinput="bindPhone"></input> <view>验证码</view> <input value="{{code}}" bindinput="bindCode"></input> <button bindtap="login">登陆</button>
***.js
Page({ data: { phone:"", code:"", },
// 获取前端数据赋值给data中对应的phone和code bindPhone: function (e) { this.setData({ phone: e.detail.value }) }, bindCode: function (e) { this.setData({ code: e.detail.value }) }, login:function(){ console.log(this.data.phone,this.data.code) // 将手机号和验证码发送到后端 wx.request({ url: 'http://127.0.0.1:8000/api/login', data: {phone : this.data.phone, code : this.data.code}, 传到后端的数据 header: {}, method: 'POST', // 返回的数据类型 // dataType: 'json', // responseType: 'text', success: function(res) {
console.log(res)
}, // fail: function(res) {}, // complete: function(res) {}, }) },
})
是一个django的项目 运用 drf
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'app01.apps.App01Config', 'rest_framework' # 注册drf ]
# 使用include from django.conf.urls import url, include from django.contrib import admin urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^api/', include("app01.urls")), ]
# app下的url from django.conf.urls import url, include from django.contrib import admin from app01 import views urlpatterns = [ url(r'^login/', views.LoginView.as_view()), ]
from rest_framework.views import APIView from rest_framework.response import Response # Create your views here. class LoginView(APIView): def post(self, request, *args, **kwargs): print(request.data) return Response({"status": True})
接下来我们启动项目
在前端发送的时候会报一个错误
原因：【等在项目上线的时候设置】 1. 微信小程序必须是https 2. 后台必须设置要访问的域名
目前我们的解决办法
解决办法---在编辑器上找到 详情 在下图标记处 打钩
这样的话就可以顺利通过了
后端
后面我们在介绍有服务器的发送短信