微信小程序开发分析总结

本文主要记录一下初次开发小程序一些注意事项，小程序开发语言，对小程序的审核要求，小程序的特点，开发特点，后面会再写下是否有三方好用的工具，及开发中遇到的js,html,css 相关的问题及解决方法。毕竟借小程序写js,html,css，感谢小程序，让我深深感到iOS开发环境xcode还是多么好用的。

基础了解

• 类目：

  • 不得超出小程序类目范围，不得与其他小程序相似，不得与微信功能相似，如微信群聊，发红包等。
  • 小程序所提供的所有服务类目功能，必须在小程序首页得到体现，要求清晰的分辨出主要功能，弱化干扰项，次要内容

• 小程序大部分API和组件均属前端范畴，但是前端开发的第三方可能支持前端但不支持小程序，比如bootstrap，网页端的docment方法小程序中不能使用

• 通过编写javascript/(w)xml/css实现逻辑，即开发语言要求了解：js;html;css

  • css教程
  • 小程序教程

• .js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件

• 微信小程序的语音格式是silk

• 微信为小程序提供的开发框架为MINA框架，类似于Weex,Vue框架

• app.json不能添加任何注释

• 每个页面的“路径+页面名”都要写到app.json 的pages中

• 所有页面层级不能超过5层

• 顶部navigation bar上的icon无法自定义（甚至目前”…”里面的操作也不能自定义）

• 顶部tab项不得超过4项

• 重要：设计有规范

心得体会：纯html/css效率不高啊标签写起来费时间，能可视化拖动自动生成就好了，有相关工具的告诉我哈，但是修改由于页面布局分开还是很快

后续补充：网上有小程序模版，真的拖就可以了。。看我别的博客有体验介绍

开发过程中

由于项目中希望用到多个第三方js库，而小程序开发工具本身并不支持，所以我们用webpack，babel开发小程序项目脚手架，集成了 dva-core.可在小程序环境下欢乐的使用redux…. 就是一堆前端的东西,所以我要去了解下面这些东西了

• 理解这个概念：数据驱动模型
• webpack：模块打包机，它做的事情是分析你的项目结构，找到js模块和预设的css，打包为合适的格式以供浏览器使用；
• npm
• Node.js ：是一个让JS运行在服务器端的开发平台，本质上是js 的运行环境。官网：Nodes.org，用node 启动web服务器
• redux：针对JavaScript应用的可预测状态容器,前端架构
• promise ：异步编程
• MINA,Weex,Vue框架
• loader
• wxml-loader
• wxapp-webpack-plugin
• wxapp-boilerplate
• dva-core
• dva
• flex布局，css盒状模型

参考博文：

• Nodejs提炼与升华（一） 前言、Nodejs简介
• 谈谈ECMA6中的Promise
• Redux简介

心得体会：我已经不用微信开发工具了，换了VSCode，感觉编译后自动同步到微信开发工具这种方式写界面并不比开发工具好用。。还有看着上面的东西，感觉如果前端转小程序开发一定 so easy.

开发中的部分问题及解决办法，我有在小程序分类的博客中记录。。供参考

Html/css使用踩坑记录：

1.图片
a.使用base64编码地址
例如：background-image: url( base64编码后的图片地址)
background-image 只能用网络url或者base64 . 本地图片要用image标签才行
b.图片显示不设置宽高则默认320*240，计算高度自适应及比例可以在标签中使用 bindload=”绑定实例，计算高度的方法”，该bindload在图片下载到后会调用。

• 图片在线压缩
• 图片在线转base64

2.包管理工具
关于yarn与npm install ,yarn 要快很多，解决了npm的一些缺陷问题，比如项目中的依赖同步问题。
相关介绍：一文看懂npm、yarn、pnpm之间的区别

3.自动滚动的坑
微信小程序API中给出的滚动方法：scroll-into-view = “{{要滚动到的元素id}}”,在使用中，如聊天信息滚动，可能滚动到的信息较长会展示不全，不能完全滚动到元素底部。
我这里设置了滚动数据距底部的距离，数据显示到那个高度就相当于触底，这样导致数据始终到底部有段距离，但是会完全显示完全，并且可以全屏手动滚动。看某些聊天app也是如此效果，但是如果你有别的解决办法，望不吝赐教留言。

4.wxml中可以使用三目运算符。
例如：class=”{{isBoss?’showBoss’:’noBoss’}}”
注意：这里要分清单引号与双引号，不能弄混淆

5.text,image,view等视图标签都可以添加点击
移动开发除了button 可点击，其他要添加手势，从这点看移动开发弱了些

6.class中可以放多个样式，空格写就好

开发工具

• VSCode（有小程序的插件可以用）
• 微信开发工具，调试方法（单步调试，数据查看，）等。
  

  开发工具上很多真机上出现的问题，模拟器上不会出现。。另外，安卓和苹果有些bug是只有一端有。。再另外。。同为安卓或苹果不同的手机出现的bug 也可能只有部分手机有。。。多测试真机。

其他

• TypeScript语法要求

安装TypeScript：
> npm install -g typescript

运行ts编译器,可以输出一个同名js文件
>tsc xxxx.ts

--
快捷键：

F12   跟踪函数定义

-- -- 
[安装ASP.NET Core](https://www.visualstudio.com/zh-hans/thank-you-downloading-visual-studio-mac/?sku=communitymac&rel=15&dotnetid=2108664613.1503281813&rr=https%3A%2F%2Fwww.microsoft.com%2Fnet)

• stackoverflow上的问题少。回复也少。不过还是可能问了有人解答的。
• 小程序的翻译:Mini Programes
• 开发真机预览要打开调试
• webview对调试基础库版本有要求

• 小程序审核上线审核说明网址

• 小程序管理后台

• 小程序注册

• 小程序，巧应用：微信小程序开发实战（第二版）源码

• 小程序更新很快，基本直接看文档加度娘就可以上手了，开发工具也几乎几天一个版本。

• 网上有很多小程序源码，可以看看，看别人的书写方法，使用方法等，也可以看效果来学习

• ES6基础：
  http://es6.ruanyifeng.com/#docs/intro

• ES5基础

• 入门Weex前需要了解一下知识，这样能帮助你更快的掌握
  Node：Node.js 教程
  Vue：《Vue.js官方教程》
  ES6：《ECMAScript 6 入门》
  Vue是一套构建用户界面的渐进式框架

• 这个也适合初学者快速入门：
  小程序,截图如下
  

最后的吐槽

• 小程序不能过大，超过2M内存占用，无法上传，虽然可以压缩，但是要有个大小的概念，领导非要做成大程序，其实也只能不断压缩，压缩会导致的问题：开发不好调试。

---

如何和领导沟通：

• 先看文档，对于明确说明的用文档说话：比如领导想webview和别的控件放到一个页面，webview会自动铺满屏并覆盖其他任何组件；领导想跳10级页面，呵呵；
• 观察下官方demo,有些问题是暂时不好处理的，比如官方demo的滚动击穿？
• 复杂页面的性能？卡不卡做出来领导自己体会去好了。。沟通起来比较累。。复杂程度怎么看呢，比如我有个页面，里面有几到几十个滚动视图，滚动视图上面放富文本，富文本里面有文字，图片，链接等。不要怀疑，我们就有一个这样的页面。。。偶尔卡到用来练习耐心

---

如何和设计师沟通：
建议先看这个：UI设计师必备！小程序设计规范来了！［内附sketch＋psd源文件］
小程序使用单位是rpx,
小程序文档中有设计规范(同框不同尺寸)，字体设计有规范
顶部navigation bar上的icon无法自定义（甚至目前”…”里面的操作也不能自定义），
其他最好要有PSD（PSD配合PXCook软件,自动生成css代码，复制粘贴来用就好了，尤其是一些复杂的样式，省了去搜索找文档和调试的时间了），尺寸规范（能得寸进尺的话我想要压缩后的图），在标准图的基础上，考虑非标准状态（文字换行，没有图片，篇幅过长，），截效果图给设计

---