热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序项目总结(一)

—KChris2017.3.16(^.^)前言微信小程序的开发,我应该算是赶上了第一波,所以,自然是一路踩坑而来。一月九日,小程序正式上线,早早地就到公司开始改bugs~前不久,我

— 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.学会在开发者社区上找答案,没有答案就去提问,会有人回答你的。


推荐阅读
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • window下的python安装插件,Go语言社区,Golang程序员人脉社 ... [详细]
  • Ansible:自动化运维工具详解
    Ansible 是一款新兴的自动化运维工具,基于 Python 开发,集成了多种运维工具(如 Puppet、CFEngine、Chef、Func 和 Fabric)的优点,实现了批量系统配置、程序部署和命令执行等功能。本文将详细介绍 Ansible 的架构、特性和优势。 ... [详细]
  • 20款必备PS插件免费大放送,附详细安装指南
    对于众多关注小资源并学习PS的用户来说,每次分享设计素材都会收到大量反馈。为了更好地满足大家的需求,今天我们特别推出了20款必备的PS插件大合集,并附有详细的安装指南,确保每位用户都能轻松上手,提升设计效率。 ... [详细]
  • 本文详细介绍了 InfluxDB、collectd 和 Grafana 的安装与配置流程。首先,按照启动顺序依次安装并配置 InfluxDB、collectd 和 Grafana。InfluxDB 作为时序数据库,用于存储时间序列数据;collectd 负责数据的采集与传输;Grafana 则用于数据的可视化展示。文中提供了 collectd 的官方文档链接,便于用户参考和进一步了解其配置选项。通过本指南,读者可以轻松搭建一个高效的数据监控系统。 ... [详细]
  • 本文通过思维导图的形式,深入解析了大型网站技术架构的核心原理与实际案例。首先,探讨了大型网站架构的演化过程,从单体应用到分布式系统的转变,以及各阶段的关键技术和挑战。接着,详细分析了常见的大型网站架构模式,包括负载均衡、缓存机制、数据库设计等,并结合具体案例进行说明。这些内容不仅有助于理解大型网站的技术实现,还能为实际项目提供宝贵的参考。 ... [详细]
  • Linux CentOS 7 安装PostgreSQL 9.5.17 (源码编译)
    近日需要将PostgreSQL数据库从Windows中迁移到Linux中,LinuxCentOS7安装PostgreSQL9.5.17安装过程特此记录。安装环境&#x ... [详细]
  • 字符串学习时间:1.5W(“W”周,下同)知识点checkliststrlen()函数的返回值是什么类型的?字 ... [详细]
  • 本文介绍了如何利用HTTP隧道技术在受限网络环境中绕过IDS和防火墙等安全设备,实现RDP端口的暴力破解攻击。文章详细描述了部署过程、攻击实施及流量分析,旨在提升网络安全意识。 ... [详细]
  • Android开发技巧:使用IconFont减少应用体积
    本文介绍如何在Android应用中使用IconFont来显示图标,从而有效减少应用的体积。 ... [详细]
  • 基于Linux开源VOIP系统LinPhone[四]
    ****************************************************************************************** ... [详细]
  • Java swing 连连看小游戏  开发小系统 项目源代码 实训实验毕设
    Javaswing连连看小游戏开发小系统项目源代码实训实验能满足学习和二次开发可以作为初学者熟悉Java的学习,作为老师阶段性学习的一个成功检验不再是单调的理解老师空泛的知识,导入 ... [详细]
  • 秒建一个后台管理系统?用这5个开源免费的Java项目就够了
    秒建一个后台管理系统?用这5个开源免费的Java项目就够了 ... [详细]
  • 本文深入解析了 Kubernetes 控制平面(特别是 API 服务器)与集群节点之间的通信机制,并对其通信路径进行了详细分类。旨在帮助用户更好地理解和定制其安装配置,从而增强网络安全性,确保集群的稳定运行。 ... [详细]
author-avatar
141qws_330
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有