小程序源码,微信小程序web开发

使用微信-微信开发人员工具和web服务之间的通信(注册为示例)创建微信-微信项目准备微信开发人员程序部分web服务web服务微信- web

准备

首先下载微信开发者工具和VS2017，注册账户，然后用微信开发者工具申请APPID。 这部分的步骤在网上有很多教程，这里不多说。 我在这里使用的服务端使用的是用于vs 2017专业版的C#工具。

微信项目1 .打开微信项目，创建微信项目，相应的APPID有关此部分的具体操作，请参阅微信官方开发文档。

2 .创建成功。 (这里是使用测试号码访问的。 )中有默认项目。 伙伴们点击运行，测试一下是否可用。

3 .创建成功后，首先删除图中的选项。

wechatdeveloperprogram第1节.前面已设置，但您可以创建一个简单的登录界面来创建相关页面，如下所示：

打开login文件夹，选择login.wxml，然后填写相关的wxml代码。 为了能在这里容易地写，代码如下。

！ - pages/log in/log in.wxml-- view class=' container ' formbindsubmit=' form submit ' bind reset=' form reset ' viewciecies 请输入/textinput class=' input text ' placeholder='邮箱' bindinput=' username input '//view！ -密码--view class=' input view ' text class=' iconfonticon-mima ' style=' margin-left 336044 rpx；' 请输入/textinput class=' input text ' password=' true ' placeholder='密码' bindinput=' password input '//view！ -按钮--view class=' loginbtnview ' button class=' log in BTN ' type=' primary ' size=' { { primary size } } ' loading=

创建web服务这里使用经典的web表单

创建成功后，在APP应用程序上单击鼠标右键以添加web服务。

删除图中的注释：

写下如何响应登录请求。 这里为了方便，表示不连接数据库。 用函数模拟一下吧。 代码如下。 用户系统； using system.collections.generic； using System.Linq； using系统. web； using System.Web.Services； namespacewebapplication1{//summary//log in概述说明///summary[web服务](namespace='3358tempuri.org/' ) ) ) [ web服务绑定(conforms to=WSI profiles.basic profile1_1) ] [ system.component model.toolbox item () /false 公共clas slogin : system.web.services.web服务{[webmethod]] (} [WebM

ethod] 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 回到微信开发者工具，我们进入app.js文件，在globalData中加入一个全局的字符串globalReqUrl:“https://gjxysie.hbpu.edu.cn/webserver”。bbddc的地址就是我们刚刚复制的。由于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 }) }, 写入登录执行逻辑：首先我们判断输入是否为空，然后若不为空发起wx.request请求，具体语法参考相关文档。设置请求为POST，使用DATA传入数据，注意这里数据名要和Web Service接口中对应方法要获取的参数名一致。获取返回的请求后做出相应其他的操作。这里的JS引用在前面写wxml时已经添加。所以一共加上前面步骤3中的逻辑完整代码为： // pages/login/login.jsconst 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机器在同一内网环境下）。测试结果如下：