一直做单机版应用程序开发，这不客户都需要手机端的小程序嘛！眼看着客户要纷纷“掉粉”，急了！必须马上学起！起步的确有点难，好在掉了些头发（摸摸还好）突破了通路，高兴之余写下来，希望能够帮到大家（瞧瞧这大局观~~~哈哈）。
微信小程序的创建就不赘述了，只是打开微信开发者工具后，眼前黑乎乎的背景，脑子里一片片空白，该怎么搞啊！大家就不用着急了，还好有我经历过，从这里开始吧！
设想一个场景---你的客户需要通过微信小程序查询积分情况，简单的只需要输入会员卡号，点击查询就显示出积分额等信息。好了，有了需求流，程序流也就很快画出来了：
一、介绍四个小程序文件
js---逻辑层控制脚本文件，主要是它发送请求和接收数据，
json--- 用于此页面局部，配置并且覆盖全局app.json配置，
wxss---页面样式设置，相当于html的CSS配置文件，
wxml---渲染层，就是页面，相当于html
二、简单的页面设计
哈哈，UI不是特长，说明问题就好^~^
1、index.wxml代码
<!--index.wxml-->
<view class="container" style="width: 750rpx; height: 153rpx; display: flex; box-sizing: border-box">
<view class="title">加油站客户积分查询</view>
<view class="top_tip">I love “油”</view>
<cloud-tip-modal showUploadTipProps="{{showUploadTip}}"></
cloud-tip-modal>
</view>
<view>
<!-- 图片直接 -->
<image bindload='imgLoad' src="../../images/petrol.jpg" style="width: 756rpx; height: 306rpx; display: inline-block; box-sizing: border-box; left: -4rpx; top: 10rpx; position: relative"></image>
</view>
<navigator url="test.wxml" open-type="navigate" target="self" ><view class="top_tip">加油！我们一直在一起！
</view></navigator>
<form bindsubmit="formSubmit" >
<view class="section" style="width: 750rpx; height: 82rpx; display: block; box-sizing: border-box">
<input class="class_input" name="card_id" placeholder="请输入卡号" />
<button formType="submit" class="button" style="width: 168rpx; height: 46rpx; display: block; box-sizing: border-box; left: 114rpx; top: -96rpx; position: relative">提交</button>
</view>
<view class="btn-area">
<text class="my-name">{{Str_Custom}}</text>
</view>
</form>
注意：
（1）Form表单，需要绑定一个属性为bindsubmit事件,bindsubmit=”formSubmit” 这里的属性值formSubmit，命名可以为符合规范的任意值，相当于以前html中的 οnsubmit=”formSubmit()”,是一个函数名，当提交的时候触发formSubmit这个函数事件，这个函数写在js中。
（2）input控件一定要有name="card_id"属性，后端处理和以前一样，比如name="card_id" PHP用 $_POST[‘card_id']来接收。
（3）由于小程序没有input submit这个按钮，所以在每个form表单中都要有一个提交按钮，<button formType="submit">提交</button>，这个按钮就是用来开启提交事件的。
（4）在页面上设置一个<text>控件，将来用来返现数据查询结果。
<view class="btn-area">
<text class="my-name">{{Str_Custom}}</text>
</view>
其中：{{Str_Custom}}是渲染层的动态变量，通过改变这个变量，返回查询结果。
2、index.js代码
// index.js
const { envList } = require('../../envList.js');
const app = getApp()
Page({
//图片加载完成后执行的方法
imgLoad(image) {
console.log(image.detail.width);
},
data: {
Str_Custom:'查询结果',
defaultClass:'my-name',
backgroudColor:'#e4393c'
},
formSubmit: function (e) {
console.log(e.detail.value);
let that = this;
if (e.detail.value.card_id.length == 0 || e.detail.value.card_id.length >= 25) {
wx.showToast({
title: '卡号不能为空或过长!',
icon: 'loading',
duration: 1500
})
setTimeout(function () {
wx.hideToast()
}, 2000)
} else {
wx.request({
url: 'https://www.ygcomputer.cn/points/show_sql.php', //替换成你们的php后台程序
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: "POST",
data: { card_id: e.detail.value.card_id },
success: function (res) {
console.log(res.data);
if (res.data.status == 0) {
wx.showToast({
title: '提交失败！！！',
icon: 'loading',
duration: 1500
})
} else {
that.setData({
Str_Custom: res.data.name + '积分余额[' + res.data.ye + ']' //显示姓名+余额
});
wx.showToast({
title: '提交成功！！！',//这里打印出登录成功
icon: 'success',
duration: 1000
})
}
}
})
}
}
})要点：
（1）初始数据的赋值
data: {
Str_Custom:'查询结果',
...
},
通过data给渲染层Str_Custom变量赋值。
（2）函数 formSubmit解释
formSubmit: function (e) { ----e代表事件引起的本函数
console.log(e.detail.value); ----主控台显出，便于调试
let that = this; ---- 关键点，这里将page的保存至that容器中，此后this会改变
......
that.setData({ ---- 关键点，上面代表page的that在这里，通过setData改变Str_Custom值
Str_Custom: res.data.name + '积分余额[' + res.data.ye + ']'
});
3、index.wxss代码
/**index.wxss**/
page {
padding-top: 54rpx;
background-color: #e2dddd;
padding-bottom: 60rpx;
}
.title {
font-family: PingFang SC;
font-weight: 500;
color: #e04343;
font-size: 44rpx;
margin-bottom: 40rpx;
}
.top_tip {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 400;
color: #000000;
margin-bottom: 28rpx;
text-align: center;
}
.button {
width: 300rpx;
text-align: center;
margin: 5% auto 5% auto;
height: 70rpx;
color: white;
border-radius: 5rpx;
line-height: 10rpx;
background-color: #07c160;
text-align: center;
font-size: 30rpx;
}
.box>text:first-child {
color: #e4393c;
}
input:active {
border: 1px solid #ddd;
}
.class_input{
width: 150px;
text-align: center;
height: 70rpx;
color: rgb(0, 0, 0);
border-radius: 3px;
line-height: 70rpx;
background-color: #b5f7d4;
}
.box{
width: 400rpx;
height: 400rpx;
display: block;
background-color: antiquewhite;
}
.my-name {
height: 30px;
width: 168px;
text-align: center;
line-height: 30px;
color: rgb(83, 81, 81);
background-color: #b5f7d4;
}
.section{
text-align: center;
align-items:center;
}一些class文件，为控件的样式，不重要。
三、后台PHP文件
我的数据库为sqlserver2016，php版本为4.2，后台php文件编写方法为（说明：php4.2以上版本MSSQL访问函数变化，不适用这个脚本）:
<?php
//说明：测试的时候是连接的是远程的mssql数据库，没有在本机运行
//初始化mssql数据库连接,分别是 主机(ip:端口号默认1433), 用户名, 密码
//header("Content-Type: text/html;charset=utf-8");
header("Cache-Control: no-cache");
$card_id=$_POST['card_id']; //接收参数
$serverName = "XXXXXXXX";
$conn=mssql_connect( $serverName ,'userxxx','passwordxxx') or die("SQL SERVER 数据库连接失败！");
//选择数据库
mssql_select_db('points',$conn);
ini_set("date.timezone", "PRC");
//sql语句
$sql="SELECT id,name,shouji,ye FROM sell_user where id = '".$card_id."'";
$result= mssql_query( $sql );
$num = mssql_num_rows($result);
if($num){
while( $row = mssql_fetch_assoc( $result) ){
$row[name] = iconv("GB2312","UTF-8//IGNORE",$row[name]);
foreach ( $row as $key => $value ) {
$row[$key] = urlencode ( $value );
}
echo urldecode( json_encode($row ) );
}
}
//关闭连接
mssql_close($conn);
?>
重点：
（1）header("Cache-Control: no-cache"); 清理服务器缓存
（2）ini_set("date.timezone", "PRC"); 同步时区；
（3） $row[name] = iconv("GB2312","UTF-8//IGNORE",$row[name]); 注意json只接受utf-字符集，而mssl汉字为GBk类型，因此必须在这里首先将汉字编码转变为UTF-8类型；（独立知识产权哦，老费劲了！）
（4）foreach ( $row as $key => $value ) { ----- 遍历字符
$row[$key] = urlencode ( $value ); ------ 转换为16进制，为 json_encode函数转换
}
echo urldecode( json_encode($row ) );------ json_encode函数后，再将字符由16进制转换为正常
四、运行结果
文章来源：https://www.toymoban.com/news/detail-503319.html
哈哈，大功告成，整个流程跑通，剩下就是细节了，如果要求低一些，这也是一个商用小程序哦~（不知道能不能通过微信审核~哈哈）。文章来源地址https://www.toymoban.com/news/detail-503319.html
到了这里，关于艰难的起步---微信小程序访问MSSQL数据库实例的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[微信小程序 开发] 云数据库](https://imgs.yssmx.com/Uploads/2024/02/451322-1.png)
