一直做单机版应用程序开发，这不客户都需要手机端的小程序嘛！眼看着客户要纷纷“掉粉”，急了！必须马上学起！起步的确有点难，好在掉了些头发（摸摸还好）突破了通路，高兴之余写下来，希望能够帮到大家（瞧瞧这大局观~~~哈哈）。

微信小程序的创建就不赘述了，只是打开微信开发者工具后，眼前黑乎乎的背景，脑子里一片片空白，该怎么搞啊！大家就不用着急了，还好有我经历过，从这里开始吧！

设想一个场景---你的客户需要通过微信小程序查询积分情况，简单的只需要输入会员卡号，点击查询就显示出积分额等信息。好了，有了需求流，程序流也就很快画出来了：

一、介绍四个小程序文件

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进制转换为正常

四、运行结果

 哈哈，大功告成，整个流程跑通，剩下就是细节了，如果要求低一些，这也是一个商用小程序哦~（不知道能不能通过微信审核~哈哈）。