微信小程序从入坑到入门

从啥也不会，到写前端 -> 发布小程序 -> 调用后端接口 -> 写后端 -> 数据库 -> 腾讯云服务搭建  -> 未完待续

一、已有的基础

19年3月写过小程序《英语四六级算分器》，就一个页面，百度下注册微信小程序，然后百度下前端的按钮啊，布局啊啥的，就上线了第一版。图1和图2（计算器页面），非常简单好入门

上线后日最高访问量几百，特别是考四六级那几天....平时用的人倒是很少。已经到了可以放广告的权限，但是为了用户体验，也没放，毕竟没投钱买服务器也不想闹大家眼睛。今年疫情期间就想优化，于是就有了图3这个页面。可是问题来了，听力资源从哪来呢？一开始从网上找听力，截请求，获取音频地址，然后在小程序中引用，后面发现，不太现实：第一是利用人家资源总归是有风险的，第二是压根没有特别全的音频，有的还是错的。。

解决：为了解决这个问题，于是我开了个公众号（虽然并没有用户gg..）从某鱼上几块钱买了完整的音频和试题原文文档，然后整理了几天，变成文章+音频，这样就相当于就把资源传到微信的服务器上了。将自己写的微信公众号文章用浏览器打开、截请求、放小程序，，于是就有了现在的图三（听力页面）这个页面

二、进阶优化

1、ajax入门学习：今年又想在小程序上加个翻译，于是就想这该怎么加呢？了解了下才发现，原来人家百度、谷歌、有道啥的都会给提供免费接口，也就是人家有服务器，对外开放功能，你调用就完了。那么问题又来了，我只会按钮啥的简单的前端，调用要怎么搞？为了能在小程序上调用，首先要学会简单的网页调用：即ajax,然后就看别人的代码，编写了百度翻译的功能（就几个文件，无需大的工程），具体详见：https://blog.csdn.net/gao_xiao_qi/article/details/104606805 写完了直接理解ajax请求了，其实也没想象的那么复杂：直接请求url，返回成功就会到success方法里，简单描述就是这样，不要想那么高深，用用就知道！

2、后面发现，只能简单的词句翻译，拓展知识要企业申请才能用，然后就不想放小程序了，就暂时不优化好了。但是学了ajax，就想做个二手平台发布下，但是我只会一点点前端基础，做二手发布还要学习后端

三、django后端搭建

1、创建工程：java啥的，工程比较大，而且各种类和调用不好入手，就拿python开刀，比较流行的就是django了，按照教程搭建，当然也遇到各种坑，比如第三方插件安不上、修改了配置无法回退又重新建N次工程、建立了mysql模型没搞懂又放弃、有的不支持又中途换python版本...

2、接口建成：diango搭建好了之后，要写后端接口了，接口直接用在url.py中对外开放，调用其他的views.py实现，最后终于实现了自己的第一个接口，访问url就可以打印后端返回的json数据。期间也是各种坑：返回乱码、数据格式不对、url正则问题无法匹配...

3、数据库：直接给数据也不行啊，总要动态从数据库读取，于是本地搭建mysql，期间有次mysql找回密码各种找不回，网上的教程总是有sql错误，就这问题还搞了一个下午...最后还是求助公司后端开发给解决了。后面就省心了，无非就是：建数据库、建表、设计字段，主键varchar int str啥的走起来。

4、读取数据库：django开发代码动态读取数据库，读完了接口返回，于是后端基本的功能就有了：

四、前后端联调

1、跨域：前端访问后端，有跨域问题，以前只停留在概念，现在终于知道啥是跨域了，请教了公司的前端工程师，发现也无计可施，网上说的各种配置url的get请求参数也不行。然后就从后端入手（前后端分离搭建也是很有好处的，起码前端不通走后端hhh），后端允许跨域，前端才又不报错

五、一步步搭建微信小程序二手商城

1、前后端、数据库都有了，剩下就是细节堆代码了，一个功能一个功能的实现吧。数据库要涉及：用户、商品，建数据库后面发现要更改，要用alter

2、列表页：画前端页面，把后端数据搞过来，涉及的知识：不同的地方获取不通资源，如：头像获取head资源，商品描述获取mysql资源等、获取图片（根据用户id和上商品id拼接url访问服务器资源）、ajax的get和post请求、箭头函数success:res=>（为了避免this获取不到）、图片位加载不够（比如有些用户只上传了一张图片，这样显示就只有1张）、又是跨域问题（小程序架构不允许，是真的严格，期间朋到奇葩的问题，就是在公司就能前后端通，在家的网就报请求不允许，应该还是ip的原因。后面看网上说勾选不校验就好了，设置后果然好了，设置如图）

但这只能治标不治本，上线还是不允许的，只能本地调调。

3、个人页：页面其实很简单，检测是否登录、没登录时点击登录就加载登录信息更新头像和昵称。但是，问题来了，不同用户登录时，要怎么区分？

学了半天才搞懂：原来人家微信是有一个openid来唯一标识每个用户的，但是这个openid不会轻易给你：先申请secret，然后人家腾讯会记录你的secret还有appid(appid在申请小程序的时候就有的)，要把这个secret、appid、本次登录的code，这三个拼接成人家腾讯规范的url，然后请求接口，人家才会返回回来唯一的用户openid，有了这个opid就好办了，存到数据库里用来唯一标识当前用户

4、买服务器：微信小程序是有体验员的，就是发布开发版，可以让体验员看到，也为了方便测试，就得发布开发版，但是发现连真机调试都不同（不用想也知道是因为手机连外网，访问不了本地服务器资源）请求的资源都是获取不到的。无奈，买了个百度的域名，然后各种配置nginx，以为这样就可以大功告成。搞了半天才发现，还差得远，因为人家外网怎么找到你本机ip啊？，人家nginx只能本地反向代理你本地上下文部署不同服务器，所以要让互联网找到你得的服务器还得来个公网ip，但是自己电脑也不现实：占用内存不说，可能还要面临在公司外网穿内网的问题，这是万万不可的。没招，买服务器吧。。

选了半天买了腾讯云，一开始无知差点买了windows版的，想着跟我本地电脑一致还能方便部署，还好及时刹车买了ubuntu的（比centos要好入手一些的），接下来就是各种装（很多其实不用装的，ubuntu自带mysql和python，反正版本不对就自己重装），于是终于能启动了：

期间想用navicat远程连接腾讯云上的mysql，然后就可以本地继续操作了，网上说要改服务器上mysql下的配置，然后就各种改，啥方法都试了就是没权限，各种chmod attr都不管用，我逐渐意识到，，可能人家服务器或者ubuntu默认装的就是改不了的，于是暂时放弃，命令行建表导数据

5、域名与服务器绑定：域名从百度云上买，服务器从腾讯云上买，于是总感觉哪里会衔接不上。根据教程：https://www.cnblogs.com/yspace/p/10050452.html的步骤，在百度云上进行解析域名，并映射到腾讯与服务的公网ip:

然后ping不通，原因是没实名或者解析完等待时间不够。然后实名完过了几个小时就能ping通了（2020/04/02)

7、换域名：百度云申请域名还是有问题的，因为只申请域名好像不能备案（每次备案都提示没有可用的服务），无奈十几块钱又在腾讯云买了个，这下子根正苗红了。。买完以后，配置上了还是ping不通的（网上很多说等10分钟），其实是没用的，现在域名好像都是必须要实名才能ping通（起码我百度和腾讯都是实名完才通过）。

实名完后还有下一步：要https请求才能配置到微信平台，也就是要申请证书，而且要备案：（2020/04/09）

好吧，目前还在审核，腾讯要审核24小时，然后管局备案就不一定了：

8、登录优化：详见：https://blog.csdn.net/gao_xiao_qi/article/details/105441855.

为了调试加密，需要安装pip install crypto这个包，百度了下，安装这个包也会报错，所以要换成pycryptodome才行

接下来就是报错：小的demo直接解析成功，在django就会报错，于是卸载、重装，还是报错。后面发现还是python版本问题，安装的地方不对（即使在同一个工程下），两个版本全部安装完，还是报错，最后，鸡眼全删了，只安装了当前django使用的python3and32bit版本的，然后莫名其妙的好了。原因应该是两者冲突了，或者说，demo虽然在django工程里，但默认加载了另一个版本的python，所以才误导了方向。（2020/4/10）

接下来就是域名审核：腾讯域名客服描述，个人申请域名不能起类似“xxx平台”之类的名字，否则会被封掉（当然企业可以，但经营范围也要在内或者相关）。而且要求重新上传各种证件，再给管局备案

9、地图

微信小程序当然是接入腾讯地图最方便，参考官网：http://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodSearch，后面发现要加的东西比较多，最终找到位大神的博客：https://blog.csdn.net/yu17310133443/article/details/88991021稍加改造后就能用了（2020/5/3）

 

10、首页下拉菜单选择：

一开始是用微信自带是的picker地图：https://developers.weixin.qq.com/miniprogram/dev/component/map.html但是太low了，而且百度了一番发现根本没办法触发它的picker直接弹出来越过点击区域（因为这个区域是写在picker里面而不是外面），就算搞出来也不灵活不好看，于是搞了半天终于放弃（2020/5/3）

后来参考https://www.jianshu.com/p/d0b067e68c8e，下载源码后，本来想白嫖过来，不动脑子的那种，后面发现没办法满足需要，因为我的“地区”想要三列而源码只有两列，差不多改了半天，一开始觉得好难不想改，但是改下来发现，他的代码也读懂了，我也可以实现我的功能了，也get到了新知识

他其实是做成了一个组件，然后index里引用这个组件，写的挺好的。我把原代码都改了一通：如果二级目录下没有三级目录，则直接返回且关闭下拉；如果有三级目录则打开三级，选择了三级后返回给菜单头部。（2020/5/5）

下面要做的事就是把地图的区域放到里面

10、发布页：涉及到知识点：表单提交、用户信息传值、数据库插入

未完待续。。

 

 

六、心得：

1、罗马不是一日建成的，一下子做个大功能对于小白来说不太现实也容易中途放弃，所以先做个简单的，上线或者用起来，有了信心，后面再加想法不迟

2、疑难问题每天都有，解决不了等一等再说，也许第二天就突发灵感，有新的方法就能解决了呢

3、优化方向：python直接操作数据库是各种不方便不好维护，逐渐意识到django的“模型”是个出路，后面要优化

4、java的增删改查应该也不是很难，应该部署springboot就足够了，后面改造再优化吧

5、这种入门级别在专业程序员面前就是小儿科，但是对于一个小白来说，从无到有的过程是很值得纪念的，hhhh