一直做單機(jī)版應(yīng)用程序開發(fā)，這不客戶都需要手機(jī)端的小程序嘛！眼看著客戶要紛紛“掉粉”，急了！必須馬上學(xué)起！起步的確有點(diǎn)難，好在掉了些頭發(fā)（摸摸還好）突破了通路，高興之余寫下來，希望能夠幫到大家（瞧瞧這大局觀~~~哈哈）。
微信小程序的創(chuàng)建就不贅述了，只是打開微信開發(fā)者工具后，眼前黑乎乎的背景，腦子里一片片空白，該怎么搞啊！大家就不用著急了，還好有我經(jīng)歷過，從這里開始吧！
設(shè)想一個(gè)場景---你的客戶需要通過微信小程序查詢積分情況，簡單的只需要輸入會員卡號，點(diǎn)擊查詢就顯示出積分額等信息。好了，有了需求流，程序流也就很快畫出來了：
一、介紹四個(gè)小程序文件
js---邏輯層控制腳本文件，主要是它發(fā)送請求和接收數(shù)據(jù)，
json--- 用于此頁面局部，配置并且覆蓋全局app.json配置，
wxss---頁面樣式設(shè)置，相當(dāng)于html的CSS配置文件，
wxml---渲染層，就是頁面，相當(dāng)于html
二、簡單的頁面設(shè)計(jì)
哈哈，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表單，需要綁定一個(gè)屬性為bindsubmit事件,bindsubmit=”formSubmit” ? 這里的屬性值formSubmit，命名可以為符合規(guī)范的任意值，相當(dāng)于以前html中的 ?οnsubmit=”formSubmit()”,是一個(gè)函數(shù)名，當(dāng)提交的時(shí)候觸發(fā)formSubmit這個(gè)函數(shù)事件，這個(gè)函數(shù)寫在js中。
（2）input控件一定要有name="card_id"屬性，后端處理和以前一樣，比如name="card_id" PHP用 $_POST[‘card_id']來接收。
（3）由于小程序沒有input submit這個(gè)按鈕，所以在每個(gè)form表單中都要有一個(gè)提交按鈕，<button formType="submit">提交</button>，這個(gè)按鈕就是用來開啟提交事件的。
（4）在頁面上設(shè)置一個(gè)<text>控件，將來用來返現(xiàn)數(shù)據(jù)查詢結(jié)果。
<view class="btn-area">
? <text class="my-name">{{Str_Custom}}</text>
</view>
其中：{{Str_Custom}}是渲染層的動態(tài)變量，通過改變這個(gè)變量，返回查詢結(jié)果。
2、index.js代碼
// index.js
const { envList } = require('../../envList.js');
const app = getApp()
Page({
//圖片加載完成后執(zhí)行的方法
imgLoad(image) {
console.log(image.detail.width);
},
data: {
Str_Custom:'查詢結(jié)果',
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
})
}
}
})
}
}
})要點(diǎn)：
（1）初始數(shù)據(jù)的賦值
data: {
? ? Str_Custom:'查詢結(jié)果',
? ? ...
? },
通過data給渲染層Str_Custom變量賦值。
（2）函數(shù)?formSubmit解釋
??formSubmit:?function?(e)?{? ? ?----e代表事件引起的本函數(shù)
??????console.log(e.detail.value);? ?----主控臺顯出，便于調(diào)試
??????let?that?=?this; ---- 關(guān)鍵點(diǎn)，這里將page的保存至that容器中，此后this會改變
......
? ? ?that.setData({??---- 關(guān)鍵點(diǎn)，上面代表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文件
我的數(shù)據(jù)庫為sqlserver2016，php版本為4.2，后臺php文件編寫方法為（說明：php4.2以上版本MSSQL訪問函數(shù)變化，不適用這個(gè)腳本）:
<?php
//說明：測試的時(shí)候是連接的是遠(yuǎn)程的mssql數(shù)據(jù)庫，沒有在本機(jī)運(yùn)行
//初始化mssql數(shù)據(jù)庫連接,分別是 主機(jī)(ip:端口號默認(rèn)1433), 用戶名, 密碼
//header("Content-Type: text/html;charset=utf-8");
header("Cache-Control: no-cache");
$card_id=$_POST['card_id']; //接收參數(shù)
$serverName = "XXXXXXXX";
$conn=mssql_connect( $serverName ,'userxxx','passwordxxx') or die("SQL SERVER 數(shù)據(jù)庫連接失?。?);
//選擇數(shù)據(jù)庫
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 ) );
}
}
//關(guān)閉連接
mssql_close($conn);
?>
重點(diǎn)：
（1）header("Cache-Control: no-cache"); 清理服務(wù)器緩存
（2）ini_set("date.timezone", "PRC"); 同步時(shí)區(qū)；
（3）?$row[name] = iconv("GB2312","UTF-8//IGNORE",$row[name]); 注意json只接受utf-字符集，而mssl漢字為GBk類型，因此必須在這里首先將漢字編碼轉(zhuǎn)變?yōu)閁TF-8類型；（獨(dú)立知識產(chǎn)權(quán)哦，老費(fèi)勁了?。?/p>
（4）foreach ( $row as $key => $value ) {? ? ?----- 遍歷字符
? ? ? ? ? ? ? $row[$key] = urlencode ( $value );? ?------?轉(zhuǎn)換為16進(jìn)制，為 json_encode函數(shù)轉(zhuǎn)換
? ? ? ? ? } ? ? ?
? ? ? ? ? echo urldecode( json_encode($row ) );------? json_encode函數(shù)后，再將字符由16進(jìn)制轉(zhuǎn)換為正常
四、運(yùn)行結(jié)果
文章來源：http://www.zghlxwxcb.cn/news/detail-503319.html
?哈哈，大功告成，整個(gè)流程跑通，剩下就是細(xì)節(jié)了，如果要求低一些，這也是一個(gè)商用小程序哦~（不知道能不能通過微信審核~哈哈）。文章來源地址http://www.zghlxwxcb.cn/news/detail-503319.html
到了這里，關(guān)于艱難的起步---微信小程序訪問MSSQL數(shù)據(jù)庫實(shí)例的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[微信小程序 開發(fā)] 云數(shù)據(jù)庫](https://imgs.yssmx.com/Uploads/2024/02/451322-1.png)
