微信小程序项目总结（一）

whatsns 发布于2019-08-20 15:09 / 1751人阅读

摘要：前言微信小程序的开发，我应该算是赶上了第一波，所以，自然是一路踩坑而来。注以下标题是按照微信开发工具上的选项进行划分的。不过，除此之外，它还会产生另外一个副作用，就是可能连小程序本身上的请求都请求不了了。

-- KChris 2017.3.16 (=^.^=)

前言
微信小程序的开发，我应该算是赶上了第一波，所以，自然是一路踩坑而来 =。=
一月九日，小程序正式上线，早早地就到公司开始改bugs~
前不久，我又对这个项目重构了一版~
现在来做个项目总结刚好，就给我踩过的那些坑留点纪念吧~

开发时,切忌将小程序简单地想象成我们web开发中的css、js、html，否则···

微信小程序的开发，实际上是在微信封装下对项目的二次开发了。很多很多的规则我们必须要去遵守，其中很明显的就是标签元素。很多标签会让我们很自然地和html中的标签元素对应起来，建立这种对应关系确实能够帮助我们更快地入手小程序，但是一定要记得不要把它们等同起来，谨记它们是有区别的。还有，开发之前，记得看看官网文档上的Q&A，预热下。

注：
1.以下标题是按照微信开发工具上的选项进行划分的。
2.总结还在一步步地完善中，每天一点点~
3.欢迎留言指正错误，知识共享~

项目
1.开发环境不校验请求域名以及TSL版本
小程序有严格的域名检查规则，规定使用https。
所以，当你的开发环境是http时，记得将这个选项勾上，不然你是无法请求到接口数据的。

2.开启ES6转ES5
如果有用ES6语法的话，记得勾上。

编辑
编辑，也就是开发咯。

1.文件引用
在小程序中，它引入了模块机制，我们可以在页面中引入我们需要的模块，但是，这种引入是单向的。比如：
a文件：

var b = require("../libs/b.js")

那我们在b文件中如果这样：

var a = require("../libs/a.js")

开发者工具是会报错的，目前我的解决方案也只是避免这种引用，直接将自己需要的部分放在同一个文件中。

2.图片
1）通过background属性引用图片
没错，我们可以在开发工具上看到效果挺正常的，但是，打开手机测试，Ops，图片不见了。
在官方文档上有明确规定，本地资源是无法通过css获取的。
所以，当你决定用background-image属性的时候，你可以：
a=> 使用网络图片
b=> base64

2）通过image标签src属性引用图片
这种方式的引用没有资源来源方式的限制，可以引用本地资源。

调试
调试的时候最大的感悟是，无论是开发者工具上，还是手机上，记得先把缓存删干净再测。而且出现bugs的时候尽量多测几次，进行反复确定。不然的话，你可能会发现，本来测好的功能又出现问题了，或者是本来有问题的部分又没有问题了，所以，测吧测吧，多测几次。

1.页面加载，前端向后台发送数据请求。
在开发阶段，我们在进行对请求结果的业务处理时，自然是边调试边修改的，有时候我们会遇到：statusCode没处理好而导致前端不断向后台发送请求，然后，卡机了。当然，在微信开发者工具上，也是。不过，除此之外，它还会产生另外一个副作用，就是可能连小程序本身API上的请求都请求不了了。发生这种情况的话，你就喝喝茶，做做眼保健操吧，给它点时间，它会好起来的。

2.代码上传报错。
手机预览小程序。在预览之前，我们是需要在开发者工具上上传代码的，说说我遇到的报错把：
1）明确提示我的代码中哪一个文件有错误
这个比较好办，就是直接找到对应文件，结合控制台，改好之后再上传代码。
2）错误提示一个不知道什么原因的error
遇见这种情况，我的解决方案是：不用纠结，关掉我的开发者工具，打开，再上传。貌似有点无厘头，但是成功几率很高，不信你可以试试。

其他
1.开发过程中，记得时刻关注官方文档上的更新日志，保持自己的开发工具是最新的。这是避免跳坑的一大法宝，不过现在还好了，刚开始的时候是真坑~
2.学会在开发者社区上找答案，没有答案就去提问，会有人回答你的。

超融合服务器专线服务微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82034.html

Java 初学者做的第一个微信小程序总结--关于Java基础

摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。为什么学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点；也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。项目展示本...

mudiyouyou 2019-08-16 14:30 评论0 收藏0
微信小程序知识总结及案例集锦

摘要：对微信小程序进行全局配置，决定页面文件的路径窗口表现设置网络超时时间设置多等。微信小程序知识总结及案例集锦微信小程序的发展会和微信公众号一样，在某个时间点爆发学习路径微信小程序最好的教程肯定是官方的文档啦，点击这里直达微信官方文档认真跟着文档看一遍，相信有vue前端经验的看下应该就能上手了，然后安装微信小程序开发者工具新建一个quick start项目，了解代码结构，...

sean 2019-08-20 17:45 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0
微信小程序mpvue框架总结

摘要：原理架构作为与之间相互通信的桥梁部分在环境中注入的实现代码，包含了协议的拼装发送参数池回调池等一些基础功能。部分在客户端中的功能映射代码，实现了拦截与解析环境信息的注入通用功能映射等功能。原理架构 JSBridge 作为native 与 JS 之间相互通信的桥梁JS部分(bridge): 在JS环境中注入 bridge 的实现代码，包含了协议的拼装/发送/参数池/回调池等一些基础功能...

microelec 2019-08-23 18:32 评论0 收藏0