微信小程序开发：使用微信开发者工具与Web Service之间通信

准备

首先下载好微信开发者工具以及VS2017，注册好账户并在微信开发者工具中申请一个APPID。这一部分步骤网上有很多教程，在这里就不多说了。我这里使用过的服务端是使用的C# 工具为VS2017专业版。

创建微信小程序项目

1.打开微信小程序香项目，创建一个微信小程序项目，输入对应的APPID。这一部分的具体操作大家可以参考微信官方的开发文档。

2.创建成功（为了方便我这里使用的是测试号进入的），里面会有一个默认的项目，小伙伴们可以点击运行测试一下是否可以使用。

3.创建成功后我们先去掉图中选项。

微信开发者程序部分

1.前面我们已经做好了配置，现在我们写一个简单的登录界面，如下创建相关页面。

2.打开login文件夹选中login.wxml，填写相关的wxml代码，为了方便我这里随便写一下，代码如下：

<!--pages/login/login.wxml-->
<view class="container"> 
 <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>

保存后结果如下：

创建Web Services服务

1. 这里我们使用经典的web窗体
   
   
2. 创建成功后我们右键应用添加一个web服务：
   
3. 去掉图中的注释：
   
4. 写一个方法来响应登录请求，我们这里为了方便，展示不连接数据库。用一个函数来模拟一下。代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace WebApplication1
{
    /// <summary>
    /// login 的摘要说明
    /// </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 login : System.Web.Services.WebService
    {

        [WebMethod]
        public string HelloWorld()
        {
            return "Hello World";
        }
        [WebMethod]
        public string logincheck(string user, string password)
        {
           // linqDataContext db = new linqDataContext();
            int i = login1(user, password);
            //int ii = db.proc_select_isblack(user, 0);
            if (i == 1 )
            {
                return "ok";
            }
            else
            {
                return "no";
            }
        }

        public int login1(string user,string password)
        {
            if (user == "LX2000" && password == "123456")
            {
                return 1;
            }
            else
            {
                return 0;
            }
        }
    }
}

代码中我们可以看到，当用户名是LX2000，密码为123456时，我们认为是运行成功。这里我们在浏览器中检验一下，并记住URL地址：http://localhost:55946/login.asmx

输入相关值可以调用此方法 这里我就不测试了。

微信小程序访问Web Service

1. 回到微信开发者工具，我们进入app.js文件，在globalData中加入一个全局的字符串globalReqUrl:“https://gjxysie.hbpu.edu.cn/webserver”。在里面的地址就是我们刚刚复制的。由于js中每个请求都会用到此部分连接字符串，因此在在这里设置为全局参数方便以后就行更改。关于IP/域名，微信是有一定的限制的，大家先要了解可以阅读微信开发者文档。
   
   2.阅读最新的开发文档，我们发现微信现在不允许我们向本机的IP发起请求，所以现在我们把刚刚写的webservice通过IIS发布在内网环境下。绑定一个内网IP。发布后浏览器测试一下能不能用内网访问。
   
   3.回到微信开发者工具，修改步骤一中的字符串为：http://192.168.31.59/login.asmx，打开login.js，写入以下代码逻辑：
   

（1）开头加入const app = getApp()；
（2）在page中的data中初始化参数username和password（如下）
（3）获取输入框中username和password的值（如下）

  data: {
    username: '',
    password: ''
  },
// 获取输入账号 
  usernameInput: function (e) {
    this.setData({
      username: e.detail.value
    })
  },
 
  // 获取输入密码 
  passwordInput: function (e) {
    this.setData({
      password: e.detail.value
    })
  },

4. 写入登录执行逻辑：首先我们判断输入是否为空，然后若不为空发起wx.request请求，具体语法参考相关文档。设置请求为POST，使用DATA传入数据，注意这里数据名要和Web Service接口中对应方法要获取的参数名一致。获取返回的请求后做出相应其他的操作。这里的JS引用在前面写wxml时已经添加。所以一共加上前面步骤3中的逻辑完整代码为：

// pages/login/login.js
const app = getApp()
 
Page({
  data: {
    username: '',
    password: ''
  },
 
  onShow: function () {
    // 生命周期函数--监听页面显示
    // wx.hideTabBar({})
  },
  onLoad: function () {
   
  },
 
 
  // 获取输入账号 
  usernameInput: function (e) {
    this.setData({
      username: e.detail.value
    })
  },
 
  // 获取输入密码 
  passwordInput: function (e) {
    this.setData({
      password: e.detail.value
    })
  },
 
  // 登录处理
  login: function () {
    var that = this;
    if (this.data.username.length == 0 || this.data.password.length == 0) {
      wx.showToast({
        title: '账号或密码不能为空',
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.request({
        url: app.globalData.globalReqUrl+'/logincheck', //
        method: 'post',
        data: {
          user:  that.data.username,
          password:  that.data.password
        },
      
        success(res) {
          console.log(res.data);
          if (res.data.d == "ok") {
            wx.showToast({
              title: '成功登录',
              icon: 'none',
              duration: 2000
            });
           
          } else{
            wx.showToast({
              title: "密码错误",
              icon: 'none',
              duration: 2000
          })}
        },
        fail(){
          wx.showToast({
            title: '服务器繁忙，请稍后重试',
            icon: 'none',
            duration: 2000
          })

        }
      })
    }
  }
})

测试

由于限制不能访问本机IP,所以这里我们使用微信开发者工具自带的真机调试功能（手机需要和Web service发布的IIS机器在同一内网环境下）。测试结果如下：