微信小程序从入坑到入门

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

一、已有的基础

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

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值