非前端快速上手微信小程序

背景：本猿是一个客户端开发人员，接到要去处理公司小程序开发的任务。就开始着手，小程序开发了。这篇文章的目的也是为了记录和勇狗(某安卓开发者)共同开发小程序所遇到的问题和解决方案。如此文能帮到各位，不胜欢喜。如有不正还请不吝赐教。

知识准备

处理小程序时，你可能需要一些基本的前端知识，主要包括：HTML，CSS，js的基本知识储备。为什么要说需要HTML的储备呢，小程序的API里有关标签（组件），主要是与勇狗合作时：不注重标签的语义话，结构也混乱一个简单视图会层层嵌套去实现。css主要是展现层：熟知一些常用属性，这里列举 border , 大部分的客户端开发者，可能会写一个div , view 设置一个并设置一个背景色来设置。去实现一个带颜色的分割线的需求！！！ 为什么还要去了解一些js，毕竟小程序不会让你去操作dom. 个人觉得特效，还有诸如对网络请求的分装，Promise finally 的封装罢了。

HTML

有关HTML的语义化,结构化 此处不在赘述此处主要讲述，JJ和狗勇在开发遇到和HTML标签差异化的东西。

• background ,bg设置背景图片的时候，通常在前端background: url("../xxx.png") 然而在小程序中不适用，你可以通过将图片转成base64 的编码格式复制到URL中，当然特别长了，不建议使用。小程序的处理方式，是使用image组件。
• view 可以理解为和div 类似的块级元素。

CSS

无论是传统的布局方案：display, float, position的组合套餐方式也好，还是使用小程序推荐flex布局方案也好，我觉得总有必要去学习一番。有关CSS属性的使用方法，介绍的文章还有教程太多，此处不去赘述。

• display，float，position 使用方法很多，JJ就根据自己的一些见解来总结一下

  • 避免使用 脱标流, 文档流能解决的使用文档流，文档流不能解决的可以使用浮动，浮动不能解决的使用定位。
  • 有关定位：JJ的使用场景是在第一个版本：此页面是有一个背景图片。第二个场景是图片上有文字。
  • position 遵循子绝父相的原则即可，absolute 不为元素预留空间，通过指定元素相对于最近的非 static 定位父元素的偏移，来确定元素位置。绝对定位的元素可以设置外边距（margins），且不会与其他边距合并。

• flex

  • flex 又名弹性盒模型，flex能快速的的解决水平，垂直居中的问题。flex容器，flex项目的布局问题，比传统操作方式更为简便。
  • flex语法篇, flex事例篇 参考软老师的者两篇文章。

• 设置页面背景色小程序的处理方式：

page {
  background-color: #F9FAFC;
  height: 100%;
}

• css的层叠性
  此处主要涉及一些明明写了样式，却不生效的问题，用于排除问题。
  • 有必要去了解css选择器的种类，标签，类，id， 复合选择器又分为：交集选择器，并集选择器，后台选择器，属性选择器，子代选择器。
  • 继承的权重
• 异常问题：
  • 浮动带来的异常效果：掉盒子，清除浮动
  • margin导致的外边距塌陷：请自行查找

JS

有关js的了解，我觉得对于有其它OOP编程语言思想的人可以去跳过一些基础语法的学习，更快上手的方式可能是遇到需求自行谷歌，百度就OK了。

• 此处想引入的是小程序双向绑定，前期可只做了解。
• 渲染相关：条件渲染，列表渲染; 前期可只做了解。
• 生命周期：小程序API自行查找。
• 事件绑定：了解小程序事件监听的方式； 前期可只做了解。

着手开发

创建项目

有关IDE的选择此处不做过多说明，你可以采用习惯的IDE，然后再选择微信开发工具作为调试工具去处理。此处JJ直接使用卫星开发工具来说明。创建好了项目，使用了测试ID，微信有一个默认的demo，我们可以先操作demo，看看效果，然后再开始去看代码。

• 匆匆一瞥微信的目录结构如下图：

  
  
  小程序文件目录
• pages 主要放置的是一些页面文件，主要包含：该页面的结构(.wxml), 页面的展现层（.wxss）,页面的逻辑层(.js),页面的配置文件(.js)
• utils 主要放置的一些工具类。
• app.js 程序的入口，可根据微信提供的API去进行操作
  • JJ主要在此地做了一些：全局的监听，版本更新，初次加载判断网络状态， 网络状态变化的监听，会话，通知过期监听
• app.json 项目全局配置：
  • window：
  • tabbar
  • 请求延时
  • 页面注册："pages" 数组写好页面的路径，cmd + s 会自动生成与指定页面的所有文件。
• app.wxss
  • 全局的样式表，比如说全屏的背景色。
  • 外层容器的通用样式，和css中的.wraper .contatiner 相似

业务开发

至此从开发者的角度来看，我觉的可以带上设计搞开始将所有页面的结构，展现参照前端的语义话和CSS的标准写出来，至于业务上的路由，组件等可以根据微信开发指南去了解了。

• 对于移动端开发者来说，最心存疑惑的莫过于设备的设备问题了微信的处理方式
  • 单位：rpx
  • flex布局
• 网络请求：前期可采用微信提供的API，后期可自行分装模块化来解耦
• 会话保持：微信授权成功后的两个参数，是后台需要与微信保持会话链接的两个参数signature rawdata
• 微信数据的持久化。
• 控件的重复点击

补充

小程序，距本次文章总结已一个月的时间，少许记录有些遗忘，有些不赘述的知识点会在有时间之时加以总结。

---

Logs

2019-07-08 19:00 last updated