如何在本机上利用IIS网页发布实现微信小程序与数据库之间的通信

主要思想：

下面就login（登录）部分做出方案

微信小程序

首先要构建一个界面和逻辑模式

WXML部分：

<!--pages/login/login.wxml--><!--<view style="height:300rpx"></view><view class="Box">账号:<input class="in" type="text" bindinput="getNum"/></view><view class="Box"> 密码：<input class="in" type="text" bindinput="getPasswd"/></view><button>登录</button>--><view class="container"><view class="userinfo"><block wx:if="{{canIUseOpenData}}" calss="userinfo-opendata"><view class="userinfo-avatar" bindtap="bindViewTap"><open-data type="userAvatarUrl"></open-data></view><open-data type="userNickName"></open-data></block><block wx:elif="{{!hasUserInfo}}"><button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button><button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button><view wx:else> 请使用1.4.4及以上版本基础库 </view></block><block wx:else><image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><form bindsubmit="formSubmit" bindreset="formReset"><view class="login-icon"></view><view class="login-from"><!--账号--><view class="inputView"><text class="iconfont icon-yonghuming" style="margin-left: 44rpx; "></text><input class="inputText" placeholder="请输入账号" bindinput="usernameInput" /></view><!--密码--><view class="inputView"><text class="iconfont icon-mima" style="margin-left: 44rpx; "></text><input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /></view><!--按钮--><view class="loginBtnView"><button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录(Login)</button></view></view></form></view>

WXSS部分

/* pages/login/login.wxss */.inputText{height: 50rpx;width: 650rpx;border-style: solid;border-color: #000;border-radius: 650px;padding-left: 10rpx;background-color: #fff;}.loginBtn{margin-left: 80rpx;text-align: center;margin-top: 40rpx;}.SignInView{text-align: right;margin-top: 20rpx;margin-left: 450rpx;color:#cccccc;}.userinfo {display: flex;flex-direction: column;align-items: center;margin-top: 30rpx;color:#000;}.userinfo-avatar {overflow: hidden;width: 256rpx;height: 256rpx;margin-top: -20rpx;border-radius: 25%;}.usermotto {margin-top: 200px;}Page{background-color: #0094aa;}

这两个完成后，刷新，页面应该如下图（黑色部分为微信图像和昵称，在这里就不做演示）

JS部分

const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),canIUseGetUserProfile: false,canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false},onLoad() {if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}},getUserProfile(e) {// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)this.setData({userInfo: res.userInfo,hasUserInfo: true})}})},getUserInfo(e) {// 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息console.log(e)this.setData({userInfo: e.detail.userInfo,hasUserInfo: true})},usernameInput: function(e) {this.setData({username: e.detail.value})},passwordInput: function (e) {this.setData({password: e.detail.value})},login: function () {wx.request({url: app.globalData.globalReqUrl+"/Login.asmx/logincheck",//后端的url地址data: {//传给后端的数据user:this.data.username,password:this.data.password,},method: 'post',success: function (res) {//res为从后端获取的数据console.log(res.data);if (res.data.d == "ok") {wx.switchTab({url: '../home/home'})}else{wx.showToast({title: '账号或密码错误！',icon:"none",duration:2000})wx.navigateTo({url: '../index/index'})}},fail: function (res) {wx.showToast({title: '连接服务器失败！',icon:"none",duration:2000})}})}})

以上就是微信小程序要做的工作，下面开始准备在电脑上加入IIS

详见https://jingyan.baidu.com/article/6079ad0eb37aac28fe86db6a.html

切记电脑更新一定要打开！

中间语言部分

首先，要加载LinQ的插件，方便中间和数据库连接，创建ASP.NET Web应用程序

在图中添加新项中添加LinQ to SQL组件

然后将Web服务添加其中

在Web服务中添加以下代码

中间语言C#

这里用的是VS2019进行编译和连接using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.Services;using System.Text;using System.Threading.Tasks;using System.Data;  //引用 表的命名空间using System.Data.SqlClient;namespace Link0CS0{/// <summary>/// WebService1 的摘要说明/// </summary>[WebService(Namespace = "http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.ComponentModel.ToolboxItem(false)]// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消注释以下行。[System.Web.Script.Services.ScriptService]public class WebService1 : System.Web.Services.WebService{[WebMethod]public string HelloWorld(){return "Hello World";}[WebMethod]public string logincheck(string user, string password){//String Num, Passwd;DataClasses1DataContext db = new DataClasses1DataContext();//db.User_tableint UserNum = db.login1(user, password);//linqDataContext db = new linqDataContext()//int ii = db.proc_select_login1(user, 0);if (UserNum>=1){return "ok";}else{return "no";}}}}

做好后就可以发布网页

如图即可发布网页

}

在浏览器输入IP后

得到以上网页就说明发布成功

在后面加上前面添加的Web服务添加在后面

如192.0.0.1+“/Login.asmx”

回车进入以下界面

与直接在编译器中运行一致

此时中间语言部分基本完成

中间语言完成后就可以连接数据库只需输入电脑的名称或IP即可，不再过多赘述

数据连接，还是按照上面的步骤依次填写就好，不再过多赘述。

SQL数据库部分

数据库和存储过程

create Table User_table(Num varchar(15),Constraint User_tablePKKey primary key(Num),Passwd varchar(20),)create procedure login1(@userNum varchar(15) = null,@userPasswd varchar(20) = null)asbeginset nocount ondeclare @n intselect @n=count(*) from User_table where Num=@userNum and Passwd=@userPasswdreturn @nend

中间语言与SQL数据库的通信

点开LinQ类中，将数据库的表和存储过程拖入其中，即可完成连接

微信小程序与中间语言的通信

在微信小程序中app.js

改成以下代码

// app.jsApp({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)// 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionId}})},globalData: {userInfo: null,globalReqUrl:"http://192.168.10.1"}})

特别强调globalReqUrl换成自己的发布时的IP

向数据库中添加用户

在微信小程序中验证

即可跳转到你设置的页面

此时，所有的工作已经完成，微信小程序和数据库已经可以通信，本次实验完毕