最近需要做了一个微信小程序，用于处理烟酒商行的线上订单。
这篇博客用于记录开发微信小程序中所遇到的各种问题与解决方法，希望能给想入坑微信小程序的各位提供一点帮助。
所有代码都已经放在 GitHub 上了，地址为：Bojack-want-drink/WeChat-App-Mall。
如果对您有所帮助，不妨给个star。
目录
- 准备工作
1.1 申请小程序账号
1.2 购买云服务器
1.3 网站备案与域名解析
1.4 申请SSL证书并进行后台配置 - 小程序代码
2.1 微信小程序基础
2.2 业务逻辑
2.3 首页代码
2.4 购物车代码
2.5 商品展示代码 - 后台部署
3.1 API文档
3.2 后台代码 - 效果展示
4.1 首页
4.2 购物车
4.3 商品展示
1. 准备工作
1.1 申请小程序账号
前往 微信公众平台 注册账号后，下载相应的小程序工具，这里我们下载 普通小程序开发者工具。记得记录AppID和AppSecret，等准备工作做完后，记得在开发设置页面配置服务器域名。
1.2 购买云服务器
我是在腾讯云上购买的学生计划的云服务器+域名套餐，因为感觉应该会比较方便，貌似阿里云也可以，只要网站备案、域名解析、SSL证书申请就行，不然太麻烦。
1.3 网站备案与域名解析
腾讯云上有相应的网站备案服务与域名解析服务，按照指引即可完成。
注意，备案需要较多天的审核，最好刚买好云服务器就开始申请备案。
1.4 申请SSL证书并进行配置
如果你也是在腾讯云上购买的云服务器，那么可以在腾讯云上申请免费的SSL证书。
申请SSL证书所需时间很短，基本当天就可以审核通过，然后就可以将证书文件下载到本地，证书文件目录如下所示：（ 这里展示的是我的SSL证书，域名为 www.putao3.cn ）
.├── Apache│ ├── 1_root_bundle.crt│ ├── 2_www.putao3.cn.crt│ └── 3_www.putao3.cn.key├── IIS│ └── www.putao3.cn.pfx├── Nginx│ ├── 1_www.putao3.cn_bundle.crt│ └── 2_www.putao3.cn.key├── Tomcat│ └── www.putao3.cn.jks└── www.putao3.cn.csr接着，需要在服务器上进行配置：
(1) 安装相关库
pip install django-extensions pip install django-werkzeug-debugger-runserver pip install pyOpenSSL(2) 修改Django的配置文件
vim settings.py在 INSTALLED_APPS = [...] 中，添加以下三行：'werkzeug_debugger_runserver','django_extensions','sslserver',（最后一行我也不确定是否有效，在添加第一二行后，运行命令会报错: --cert 命令无法找到。我添加了第三行，发现可成功运行）(3) 传输证书在服务器上
将 1_<你的域名>_bundle.crt 和 2_<你的域名>.key 这两个文件放在Django 项目文件夹下，即 manage.py 所在目录。
（PS：可利用scp命令在Linux之间复制文件和目录，Linux scp命令）
(4) 启动 Django
python manage.py runsslserver 0.0.0.0:8100 --certificate 1_<你的域名>_bundle.crt --key 2_<你的域名>.key 参考资料：
django使用https
Django 支持 接入腾讯云 SSL证书
django使用https
(5) 后台不挂断运行
安装screen，并利用screen启动 Django 即可。
# 安装screensudo apt install screen# 新建一个screenscreen -S web# 查看所有screenscreen -ls# 连接指定名称的screenscreen -r web# 连接指定进程号的screenscreen -r <pid># 彻底结束指定screenscreen -X -S web quit建议编写脚本，定期重启后台。
参考资料：
ubuntu Django项目后台不挂断运行之screen命令
Ubuntu cron 定时执行任务
Shell编程基础
Ubuntu 16.04设置crontab定时计划任务
2. 小程序代码
2.1 微信小程序基础
(1) 开发须知
在开始入坑前，最好先看看官方的文档，以及微信公众平台的小程序发布流程。
参考资料：
官方工具，官方简易教程，官方API
(2) 学习资料
刚开始编写微信小程序，我们应该先从模仿他人的作品开始，这样也可以少犯许多错误。
参考资料：
【开源】小程序And公众号商城，外加后台，功能齐全！
EastWorld/wechat-app-mall
[demo]微信小程序完整商城类demo：灵动云商（含PHP后端）（线上）
(3) 错误解决办法
- thirdScriptError TypeError: this.setData is not a function：
论微信小程序的坑：thirdScriptError TypeError: this.setData is not a function
微信小程序 setData 的坑 - 如何用setData修改data中的数组:
微信小程序 如何用setData修改data中的数组?
2.2 业务逻辑
整个线上商城的业务逻辑如图所示：
2.3 首页代码
index.js:
Page({ data: { navs_wine: [ { id: 0, src: "../../images/icon-wine-0.png", name: "洋酒", url: "../product/wine/wine/wine"}, { id: 1, src: "../../images/icon-wine-1.png", name: "红酒", url: "../product/wine/red_wine/red_wine"}, { id: 2, src: "../../images/icon-wine-2.png", name: "白酒", url: "../product/wine/spirits/spirits"}, { id: 3, src: "../../images/icon-wine-3.png", name: "啤酒", url: "../product/wine/beer/beer"} ], navs_others: [ { id: 0, src: "../../images/icon-others-0.png", name: "烟草", url: "../product/others/cigarette/cigarette"}, { id: 1, src: "../../images/icon-others-1.png", name: "茶叶", url: "../product/others/tea/tea"}, { id: 2, src: "../../images/icon-others-2.png", name: "饮料", url: "../product/others/drink/drink"}, { id: 3, src: "../../images/icon-others-3.png", name: "其他", url: "../product/others/other/other"} ], slides: [ { id: 0, src: 'https://www.putao3.cn:8100/getIndexImg/getHeadImg/0' }, { id: 1, src: 'https://www.putao3.cn:8100/getIndexImg/getHeadImg/1' }, { id: 2, src: 'https://www.putao3.cn:8100/getIndexImg/getHeadImg/2' } ], pop_products: [ { id: 0, src: 'https://www.putao3.cn:8100/getIndexImg/getPopImg/0' }, { id: 1, src: 'https://www.putao3.cn:8100/getIndexImg/getPopImg/1' }, { id: 2, src: 'https://www.putao3.cn:8100/getIndexImg/getPopImg/2' } ], new_products: [ { id: 0, src: 'https://www.putao3.cn:8100/getIndexImg/getNewImg/0' }, { id: 1, src: 'https://www.putao3.cn:8100/getIndexImg/getNewImg/1' }, { id: 2, src: 'https://www.putao3.cn:8100/getIndexImg/getNewImg/2' } ], hot_products: [ { id: 0, src: 'https://www.putao3.cn:8100/getIndexImg/getHotImg/0' }, { id: 1, src: 'https://www.putao3.cn:8100/getIndexImg/getHotImg/1' }, { id: 2, src: 'https://www.putao3.cn:8100/getIndexImg/getHotImg/2' } ], phoneNumber: [ { id: 0, num: '123456' }, { id: 1, num: '654321' }, { id: 2, num: '456123' } ], block: false }, onShareAppMessage: function () { return { title: "烟酒商行", path: 'pages/index/index' } }, onPullDownRefresh: function () {}, onLoad: function () {}, onReady: function () {}, show_number: function(){ this.setData({ block: true }) }, hide_number:function(){ this.setData({ block: false }) }, callMe: function(e){ wx.makePhoneCall({ phoneNumber: this.data.phoneNumber[e.target.id].num }) this.setData({ block: false }) }})index.wxml:
<scroll-view scroll-y="true" height="100%"> <swiper style="height:400rpx;" indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <block wx:for="{{slides}}" wx:for-item="slide" wx:key="id"> <swiper-item> <image class="slide-img" src="{{slide.src}}" mode="aspectFit"/> </swiper-item> </block> </swiper> <view class="navs"> <block wx:for-items="{{navs_wine}}" wx:key="name"> <view class="nav-item" data-type="{{item.name}}" data-typeid="{{item.id}}"> <navigator url="{{item.url}}"> <image src="{{item.src}}" class="nav-image"/> </navigator> <text>{{item.name}}</text> </view> </block> </view> <view class="navs"> <block wx:for-items="{{navs_others}}" wx:key="name"> <view class="nav-item" data-type="{{item.name}}" data-typeid="{{item.id}}"> <navigator url="{{item.url}}"> <image src="{{item.src}}" class="nav-image"
版权声明
即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题，烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ，我们将及时处理。本站文章仅作分享交流用途，作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关，请知悉。
