养车记账本小程序开发教程

àì夳堔傛蜴生んèń 2022-06-10 04:27 158阅读 0赞

### 前言 ###

自微信6.5.3版本开始，[小程序][Link 1]正式跟大家见面了。最近利用业余时间做了个小程序，命名“养车记账本”。作为IT狗，经历了从注册开发者资质开始到正式上线的全过程，微信小程序官方 文档 、 快速构建具备弹性伸缩能力的微信小程序 等不在此次叙述之列。本实例所用资源为腾讯云购买的微信小程序解决方案，选的其中的PHP环境。

## 准备工作 ##

因为涉及的东西比较多，所以需要准备的东西也比较杂。当然，你得首先知道自己要做什么，毕竟这一切准备和将来的劳动都将为这个产品服务。

开发者资质、服务器、数据库、域名（需要预留至少20天备案时间）、SSL证书等可以通过申请、购买获得，工具及操作环境如下：

![1502088064769_1120_1502088065126.jpg][]

工具：Axure RP、putty、WinSCP、Photoshop、微信web开发者工具、Sublime Text、Zend Studio

操作环境：微信公众平台、腾讯云、业务服务器CentOS 7.2(nginx/1.10.1、php-fpm(PHP 5.6.26, Zend Engine v2.6.0))、会话管理服务器CentOS  
7.2(PHP+Mysql+Apache)、微信小程序数据库MySQL  
　　  
整个过程会产生一些费用，根据自己选择，大概几百元的样子。不过别担心，腾讯云可以满足所有需求，其中的微信小程序解决方案，就是专门针对小程序量身定制的。

## 申请资源 ##

目前小程序的开放注册范围仅限于企业、政府、媒体和其他组织，是不开放对个人注册的，所以首先你需要给自己一个合法的身份，我是找了个朋友的企业注册的。申请小程序的开发权限，请移步微信公众平台。吐槽一句，现在开发者也流行缴纳“入会费”，这里需要300元。

![1502088088118_2411_1502088088378.png][]

其次是腾讯云注册，这里可以获得小程序用到的一切资源，包括域名、SSL证书、服务器、数据库等。小程序毕竟是腾讯的产品，服务器支持肯定自家的兼容更好些，腾讯云官网为广大开发者提供了微信解决方案服务器。首次购买半年需要516元，后期续费每月91元。

![1502088110187_28_1502088110457.png][]

见到下面这个界面，就申请成功了。

![1502088123664_6973_1502088123869.png][]

## 域名（申请、解析、备案） ##

腾讯云可以申请域名，（.com域名一般需要45元左右），审核过程会持续4-5个工作日，之后需要解析域名，在腾讯云管理中心可以直接操作(登录腾讯云管理中心-云产品-域名服务-云解析)。域名备案比较耗时，要在指定背景下拍照。如果你距离指定地点比较近，可以到指定地点拍照，基本各省都有拍照点，见拍照点地图。

![1502088166035_9763_1502088166409.png][]

如果不方便，可以申请邮寄给你个背景幕布，按照要求拍照，见办理拍照指南，备案材料提交管局审核，需要大概20个工作日（你得习惯这工作效率），所以最好提前申请域名，给备案预留出时间。

![1502088191169_8979_1502088191400.png][]

另外，域名实名认证也需要4-5天。

## 创建微信小程序服务器 ##

在腾讯云购买小程序解决方案时需要选后台语言，决定了分配给你的是什么系统及环境的服务器（有PHP、Java、Node.js、.NET四种选择），后期可更改、重装系统。云端小程序构建完成后会得到三个服务器：业务服务器、会话管理服务器、MySQL数据库服务器，之后以短信形式发送分配的服务器登录密码，用户名统一是root。

在腾讯云登录服务器后可以在弹出的黑色命令窗口输入命令，见下图：

![1502088212258_9673_1502088212522.png][]

之后输入用户名和密码即登录成功。这个登录窗口是用canvas做的，不能拖动滚动条查看一屏以外的东西，相当憋屈。所以还得有个称手的工具，现在putty可以登场了。

![1502088225218_8529_1502088225483.jpg][]

运行putty之后输入公网IP地址，点击Open，之后输入用户名密码，就可以执行各种shell命令了。

![1502088236845_7596_1502088237079.jpg][]

至于上传下载文件，为了安全起见，默认安装的镜像 FTP 不支持，官方推荐用WinSCP/SecureFX，这两个都可以支持，操作跟 FTP 类似。

这里不得不说下关于三个服务器需要注意的点，或者说是坑。系统虽然可以重装，不过需谨慎，因为有些配置重装后并不能恢复成最初分配时的状态。下图是业务服务器重装界面（再次提醒：重装需谨慎）：

![1502088253703_6762_1502088254074.jpg][]

关于业务服务器：我选的是PHP环境服务器，购买后默认并不支持mysql，需要自己安装。下面是关于PHP环境业务服务器升级支持mysql扩展方法：

### Update php and install php-mysql extension
    wget 'https://mirrors.tuna.tsinghua.edu.cn/remi/enterprise/remi.repo' -O /etc/yum.repos.d/remi.repo
    yum --enablerepo=remi-php56 -y update php
    yum --enablerepo=remi-php56 -y install php-mysql
    service php-fpm restart

以上四行，从上到下按次序执行或保存为一文件，如update\_php.sh（见附件）， 然后执行

chmod +x update_php.sh

再执行

./update_php.sh

即可

业务服务器配置参考这里，修改Linux - /etc/qcloud/sdk.config文件。  
业务服务器的文件存放路径/data/release/php-weapp-demo

关于会话服务器：首先查看《腾讯云小程序会话管理服务器BUG修复与升级方案》（见附件），然后如果你也重装了会话服务器，你可能还会发现一个问题，官方给出的三木聊天室demo链接失败。问题解决参考这里 。

1.执行

cd /opt/lampp/htdocs/mina_auth/system/db/
    vi db.ini

记下配置里的host和pass\_wd值，之后ctrl+Z退出。

2.执行

cd /opt/lampp/bin/

之后按照参考，本应执行

./mysql -h #ip -P #port -u #username -p #passwd(其中#ip、#port、#username、#passwd是在1.2步骤中查看到的具体信息)

但因为重装系统默认提供的IP和密码不正确，需要在微信小程序数据库MySQL账号管理里为session\_user重置密码，见下图：

![1502088413323_650_1502088413626.png][]

然后用mysql内网IP和新密码执行如下命令：

./mysql -h IP -P 3306 -u session_user -p新密码

或直接用root账号登录，执行：

mysql -h IP -P 3306 -u root -proot密码

(IP为微信小程序数据库MySQL内网地址，用户名和密码为登录数据库服务器的账号密码，注意参数-p后没有空格)

3.登录微信公众号打开开发设置，记下AppID(小程序ID)和AppSecret(小程序密钥)

4.执行(命令行后带;设置字段值不用引号，退出mysql命令行直接输入;回车)：

use cAuth;
    update cAppinfo set appid = 这里是AppID,secret =这里是 AppSecret;

5.为会话服务器云主机安全组添加默认安全组放通全部端口，并更改优先级在前面

6.更新/opt/lampp/htdocs/mina\_auth/system/db/vi db.ini内容为以下：

[db]
    host = 数据库MySQL内网地址
    port = 3306
    user_name = session_user
    pass_wd = 新密码
    data_base= cAuth

或

[db]
    host = 数据库MySQL内网地址
    port = 3306
    user_name = root
    pass_wd = root密码
    data_base= cAuth

会话服务器文件存放路径/opt/lampp/htdocs

关于数据库服务器：如果有数据表格需要导入，如果你要导入的.sql文件大于2048k，可以压缩成zip，一般可以压缩到原来的1/20，压缩比率还是很可观的。

## 腾讯云实名认证 ##

腾讯云实名认证后可以获得腾讯云的代金券，还可以更好的保障你的号安全，认证后你的腾讯云号也是独一无二的。具体见[实名认证指引][Link 2]，大约1-2个工作日。

![1502088510257_196_1502088510540.jpg][]

## SSL证书 ##

为了保护小程序应用安全，微信官方的需求文档要求每个微信小程序必须事先设置一个域名，并通过HTTPS请求进行网络通信，不满足条件的域名和协议无法请求。所以需要购买或申请SSL证书。目前正规渠道购买SSL证书还是很贵的，不过如果您选的是微信小程序方案，这个SSL证书是免费的（大约需要1个工作日审核下发）,颁发后会获得一个压缩包，内含安全证书。安装ssl证书参考这里,把ssl证书压缩包内Nginx下的证书拷贝至/etc/nginx下

至此，环境算搭好了，剩下的就专注于你的小程序开发了。

## 小程序策划 ##

我最初是想做一个车友会之类的小程序，但涉及车友互动发文之类，需要有互联网电子公告服务许可证， 总之各种条条框框。反正我是练手，还是绕过这个限制，改做记账本之类的小工具了，鉴于目前小程序只能匹配全名，只在个别关键词开启了模糊匹配，经过查验，“养车”和“记账”两个词都可以模糊搜索，所以名字就叫“养车记账本”了，可以给车主提供个专门记录养车所产生的费用的统计工具。从用户开始访问小程序开始，大概流程图如下：

![1502088603317_5112_1502088603493.png][]

主要涉及以下几个功能：增加记账、账单列表、账单筛选、修改账目、删除账目、账单统计、车型选择、分类设置等。

增加记账和修改账目可以共用同一个界面，根据实际需要，要用到账单分类、账单产生日期，再就是额度。记账页面操作简单，见后面设计图。

账单列表页和账单统计作为一个展示模块，需要能够通过设置筛选条件比如时间段、类别勾选来展示指定账目，展示方式为按时间列表，统计方式为饼图。

用户可以设置车型，可以不填。如果用户有不止一辆车，这个必须为必填，不过第一版先不考虑多辆车这个维度，后期再加。

至于分类，我大概归纳了一下用车、养车过程可能产生费用的方面，大概包括（停车费、加油费、养护、保险、罚款、高速、维修、购车、年检、改装、赔偿等），如果不够用可以在分类设置里增加分类，如果用不到的可以关闭，避免干扰。

再就是象征性的来个建议反馈、关于之类的。

## 小程序设计 ##

小程序有推荐的设计规范，见[微信小程序设计指南][Link 3]，为方便设计师进行设计，微信提供一套可供Web设计和小程序使用的基础控件库；同时提供方便开发者调用的资源。设计小程序推荐以iphone6的尺寸为标准，即750px\*1334px。

![1502088659472_5080_1502088659810.png][]

其中图标我用的钢笔工具，选择的2像素路径描边，无填充色。一共分两种状态：选中状态和未选中状态。未选中状态描边色\# 7a7e83，背景色\# f5f5f5；选中状态描边色\#ffffff，背景色\# 1aad19 。

![1502088677381_7281_1502088677710.jpg][]

## 小程序开发 ##

开始码代码了，开发分前端和后台。

小程序在前端上的贡献不得不点赞，wxss在css的基础上扩展了rpx（responsive pixel）单位，rpx换算px为屏幕宽度/750，px换算rpx为750/屏幕宽度。这样就可以根据屏幕宽度进行自适应，让前端开发可以解放出来不用过多考虑兼容问题。使用rpx规定屏幕宽为750rpx，比如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。wxml是 微信 的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。开发工具不大好用（遇到N次闪退，有个好的保存习惯还是不错的；还有就是调试时候如果需要点开非默认页面，有时候不能刷出Wxml结构，重启开发工具可以解决），但毕竟不是一天两天打造完美的，相信微信团队一定能做更好。如果不习惯也可以用你喜欢的工具。我的页面结构如下：

"pages":[
        "pages/add/index/index",
        "pages/statistics/index/index",
        "pages/my/index/index",
        "pages/my/autoBrand/autoBrand",
        "pages/my/autoSerial/autoSerial",
        "pages/my/autoModel/autoModel",
        "pages/my/sort/sort",
        "pages/my/feedback/feedback",
        "pages/my/about/about",
        "pages/other/reLogin/reLogin"
      ],

如果问你，小程序放开的用户数据够吗？你一定说不够。那我们能做的就是物尽其用吧！如果你的接口涉及wx.getUserInfo当中的 openId，接口的明文内容将不包含这些敏感数据。如果需要获取敏感数据，需要对接口返回的加密数据( encryptedData )进行对称解密。可参考[微信小程序客户端腾讯云增强][Link 4] SDK。

在微信登录，解密encryptData后，可以在userInfo里可以看到用户信息

![1502088727336_1417_1502088727498.png][]

在登录后做了这些工作：获取用户信息，对照数据库，如果库里有该用户，将车型和类别设置存储到本地，以供其他页面调用；如果没有则保存该用户。如果库里有该用户且设备信息有变化则更新设备信息，如果没有则追加设备信息。如果用户拒绝获取用户信息，授权失败，显示重新授权教程。篇幅有限，只截取部分代码展示。代码如下：

// 用户登录
    UserLoginFn:function(){
        var that = this;
        // qcloud.request() 方法和 wx.request() 方法使用是一致的，不过如果用户已经登录的情况下，会把用户的会话信息带给服务器，服务器可以跟踪用户
        qcloud.request({
            url: config.service.requestUrl, // 要请求的地址
            login: true, // 请求之前是否登录，如果该项指定为 true，会在请求之前进行登录
            success(result) {
                wx.setStorageSync('ThisUserInfo', result);
                var usr = result.data.data.userInfo;
                that.setData({
                    ThisUserInfo: result
                });
                wx.setStorageSync('OpenID', usr.openId);
                // 用户登录(如果库里有该用户，将车型和类别设置存储到本地，如果没有则保存该用户)
                wx.request({
                    url: 'https://xxx.php', //这里不是真实地址
                    data: {
                        OpenID: usr.openId,
                        NickName: usr.nickName,
                        AvatarUrl: usr.avatarUrl,
                        Gender: usr.gender,
                        Country: usr.country,
                        Province: usr.province,
                        City: usr.city
                    },
                    success: function(res) {
                        if(res.data){
                            wx.setStorageSync('ThisUserInfoModelID', res.data.ModelID);
                            wx.setStorageSync('ThisUserInfoSortIDList', res.data.sortIDList);
                            that.sortFormat(); // 登录成功后为该用户格式化表单
                        }
                    }
                });
                // 用户设备信息采集
                wx.getNetworkType({
                    success: function(res) {
                        // 返回网络类型, 有效值：wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
                        var networkType = res.networkType;
                        wx.getSystemInfo({
                            success: function(res) {
                                // 如果库里有该用户且设备信息有变则更新设备信息，如果没有则追加设备信息
                                wx.request({
                                    url: 'https://xxx.php', //这里不是真实地址
                                    data: {
                                        OpenID: usr.openId,
                                        Model: res.model,
                                        System: res.system,
                                        Language: res.language,
                                        Version: res.version,
                                        Platform: res.platform,
                                        Network: networkType,
                                        WindowWidth: res.windowWidth,
                                        WindowHeight: res.windowHeight,
                                        DevicePixelRatio: res.pixelRatio
                                    }
                                });
                            }
                        })
                    }
                });
            },
            fail(error) {
                wx.showModal({
                    title: '提示',
                    content: '未授权不可使用，请删除后重新获取养车记账本。',
                    showCancel: false,
                    confirmText: '查看教程',
                    confirmColor: '#3CC51F',
                    success: function(res) {
                        if (res.confirm) {
                            wx.redirectTo({
                                url: '/pages/other/reLogin/reLogin'
                            });
                        }
                    }
                });
            }
        });
    },

前端开发过程中遇到的问题顺便提一句，canvas、textarea、video等组件使用原生渲染，如果需要弹层交互的话它们会挡住弹层，解决办法就是在弹层后将这些组件hidden属性设置为true，弹层消失时重置为false。另外还有个问题：我想把data里的数据保存成对象格式的，如果追加key值的话，不支持a.b:'c'这样追加，只能a:\{b:'c'\}，但前者可以更直观的表示某一组赋值是给一个特定对象的，尤其有时候不能确定你要追加的key值就限于你指定的那几个的时候，但setData并不支持这种做法，不知是出于何种考虑，如果没有特殊原因还是希望能改进下。再有就是css不支持标签名选择器，也是目前支持标签比较单一，所以要想美化某个组件，必须给它实实在在赋个样式，略显臃肿。

后台开发语言我选的是PHP，主要是网上资料多，函数方法齐全。关于PHP对MySQL的增删改查操作网上很容易找到。在同事的指点下，采取了一些措施，防止SQL注入与XSS攻击，主要是过滤文本，做了字符串转换、格式化等操作。在账单查询页面，通过联合查询列出用户表和账单表信息，对查询结果装入数组，之后进行格式化输出供小程序使用，代码如下：

$accountArr = array();
    $MonthList = array();
    $dateTemp = '';
    $switch = false;
    function wk($date1) {
        $datearr = explode('-',$date1); //将传来的时间使用“-”分割成数组
        $year = $datearr[0]; //获取年份
        $month = sprintf('%02d',$datearr[1]); //获取月份 
        $day = sprintf('%02d',$datearr[2]); //获取日期
        $hour = $minute = $second = 0; //默认时分秒均为0
        $dayofweek = mktime($hour,$minute,$second,$month,$day,$year); //将时间转换成时间戳
        $shuchu = date('w',$dayofweek); //获取星期值
        $weekarray = array('星期日','星期一','星期二','星期三','星期四','星期五','星期六'); 
        return $weekarray[$shuchu]; 
    }
    while($row = mysql_fetch_array($result,MYSQL_ASSOC)){
        if( $switch && (substr($dateTemp,0,7) != substr($row['Date'],0,7)) ){
            $monthTemp = array( 
                'Month' => substr($dateTemp,0,7),
                'MonthList' => $MonthList
            );
            $accountArr[] = $monthTemp;
            $MonthList = array();
        }
        $temp = array( 
            'ID' => $row['ID'],
            'Date' => $row['Date'],
            'DateWk' => substr($row['Date'],8,2).'日 ('.wk($row['Date']).')',
            'SortID' => $row['SortID'],
            'Name' => $row['Name'],
            'Mony' => preg_replace('/^0+/','',$row['Mony'])
        );
        $MonthList[] = $temp;
        $dateTemp = $row['Date'];
        $switch = true;
    }
    $monthTemp = array( 
        'Month' => substr($dateTemp,0,7),
        'MonthList' => $MonthList
    );
    $accountArr[] = $monthTemp;
    if($dateTemp == ''){ // 如果没有结果
        $accountArr = array(); //返回空数组
    }
    $str = json_encode($accountArr); //将数组转化为json格式的字符串
    echo $str;

针对自己的项目，需要设计合理的数据库表以满足记账的需要。关于账单表字段设置如下：

CREATE TABLE `user_account` (
      `ID` int(10) UNSIGNED NOT NULL COMMENT '指针',
      `OpenID` varchar(32) NOT NULL COMMENT '用户ID',
      `SortID` int(10) UNSIGNED NOT NULL COMMENT '类别ID',
      `Mony` decimal(11,2) UNSIGNED ZEROFILL NOT NULL DEFAULT '000000000.00' COMMENT '金额',
      `Date` date NOT NULL COMMENT '添加日期'
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='账目表';

此外还有用户表、设备表、类别表、车型表。除了车型表独立存在之外，其他几个表都是以OpenID字段相互关联的，以实现相互间的互查。

## 小程序测试、发布、监测 ##

开发者工具 集成了开发调试、代码编辑及程序发布等功能，其中模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能在模拟器上呈现出正确的状态。自带的调试工具分为 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage，平时开发的时候及时纠错，问题不大。马上就要车展了，鉴于时间关系，第一版就这样匆匆提交了。不过比较幸运，首次提交就通过审核了。

![1502088807063_16_1502088807329.png][]

提交审核需要填一些简单的信息，有利于用户快速搜索出你的信息。之后可以在微信公众平台查看数据分析，其中的自定义分析功能强大（不过目前正在内测中，暂时只支持开发者测试数据上报；6.5.4及以上微信版本支持用户数据上报，用户微信版本更新以前无法收集数据。新版本覆盖全量用户前，数据可能有缺失），可以从不同角度分析访问者信息，为你进一步挖掘用户信息做足准备。

![1502088821847_202_1502088821980.png][]

## 结语 ##

随着小程序不断增长，越来越多的小程序渗透到网友生活、工作的方方面面。弱水三千只取一瓢。本着满足客户某项需求的前提下尽量做一个小而美的工具。

问题是养车记账本目前只具雏形，限于时间和个人能力，班门弄斧，只完成了基础功能，还有很多细节需要调整，功能也不太完善，比如筛选交互逻辑还需要进一步优化，每个网友现在也只能为一辆车记录账单，账单统计还可以列出筛选具体额度以及增加趣味评价，甚至可以考虑增加位置定位等功能……也恳请大家提出宝贵意见，未来一个月比较忙，等车展过后继续！

[Link 1]: http://9.cn/
[1502088064769_1120_1502088065126.jpg]: /images/20220610/9225472d0cf44f2ca4d978821112a4a8.png
[1502088088118_2411_1502088088378.png]: /images/20220610/265ab41896fb4a759bcc01ada12bd455.png
[1502088110187_28_1502088110457.png]: /images/20220610/394d0627adfd4d45b7362282fda25c4b.png
[1502088123664_6973_1502088123869.png]: /images/20220610/cbc711b82fe04432a9e6d3f184022ea3.png
[1502088166035_9763_1502088166409.png]: /images/20220610/0a6b0150439e4fcd83e34289570ddaf0.png
[1502088191169_8979_1502088191400.png]: /images/20220610/37030c4305cb46128b87f0cef4f71948.png
[1502088212258_9673_1502088212522.png]: /images/20220610/12c2c432cde3481db2d2d7fc6430fc0b.png
[1502088225218_8529_1502088225483.jpg]: /images/20220610/0c752af080d54728baef24710550142f.png
[1502088236845_7596_1502088237079.jpg]: /images/20220610/6090bf43fb2841528bcca2db00d42967.png
[1502088253703_6762_1502088254074.jpg]: /images/20220610/b759ede6e3fc43a2bce6ad5193e73567.png
[1502088413323_650_1502088413626.png]: /images/20220610/0abc37479fd54fb2bfdf3fcbf4a0ae58.png
[Link 2]: https://www.qcloud.com/document/product/378/3629
[1502088510257_196_1502088510540.jpg]: /images/20220610/96a3e78edeaf4ea18c0e73505ee1f07d.png
[1502088603317_5112_1502088603493.png]: /images/20220610/12b8d2f2e01e4cb8931ce1ab86467a02.png
[Link 3]: https://mp.weixin.qq.com/debug/wxadoc/design/index.html
[1502088659472_5080_1502088659810.png]: /images/20220610/119141b2b3294279ba1fb5b64a387f28.png
[1502088677381_7281_1502088677710.jpg]: /images/20220610/4d696b6bcead48f899d8e61ea544e693.png
[Link 4]: https://github.com/tencentyun/wafer-client-sdk
[1502088727336_1417_1502088727498.png]: /images/20220610/3706633f26cc42fabd233ebe70da012b.png
[1502088807063_16_1502088807329.png]: /images/20220610/3b7f0242472c464ea5e0fee2e911cb24.png
[1502088821847_202_1502088821980.png]: /images/20220610/253fcef4818241ea8df390cb3636b4f4.png