2020 March 08 小程序

第一章：小程序开发之基础

什么是微信小程序？

  1. 简称小程序（Mini Program），是一种不需要下载安装即可使用的应用，于2017年1月9日正式上线
    1. 有点像是镶嵌在微信中的“APP”
  2. 小程序的4大特性：无需安装、触手可及、用完即走、无需卸载
    1. 实际上小程序使用之前还是需要下载安装的：下载→安装→使用
    2. 只不过官方对小程序的安装包（release包）有大小限制，比如目前限制是不能超过2M
      1. 下载安装速度非常快，给用户一种不需要安装的感觉
    3. 因此，开发中用到的资源文件（大图片、音频、视频等）也尽量放在服务器端
  3. 目前小程序的主要入口有：扫码、微信内搜索、点击聊天中分享的小程序、点击公众号菜单
    1. 目前无法分享到朋友圈
  4. 小程序的一些应用场景：不经常使用、但是刚需、不会停留太久的简单工具
    1. 例如：天气预报、买票（车票、机票、门票、电影票）、出行、住宿、话费、缴费、外卖、快递等

小程序开发 vs 网页开发

  1. 小程序开发与网页开发有很大的相似性 pic
  2. 在小程序开发中
    1. 编写样式时建议多使用flex布局
    2. 支持TypeScript：微软推出的一门非常好用的语言类似于js
    3. 也可以自行搭建less、sass开发环境
  3. 网页开发中的渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应
    1. 渲染线程：网页中的文字图片渲染到浏览器上面
    2. 脚本线程： 网页中的事件交互监听
    3. 网页中有2件事情非常重要：1.渲染显示界面 2. 页面交互事件
    4. 互斥：当交互事件耗时非常长（比如点击一个按钮做了很多事情）时页面显示会卡住
  4. 网页开发者可以使用到各种浏览器暴露出来的DOM API，进行DOM选中和操作
  5. 在小程序中，页面渲染和业务逻辑是分开的，分别运行在不同的线程中
    1. 逻辑层（脚本js）运行在JSCore中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API
    2. 因此非常熟悉的一些库，例如jQuery、Zepto等，在小程序中是无法运行的
    3. 同时JSCore的环境同NodeJS环境也是不完全相同的，所以一些NPM的包在小程序中也是无法运行的
  6. 小程序的性能介于纯网页开发与原生（native）开发之间

小程序的运行环境

  1. 小程序在安卓与iOS平台的环境区别如下 pic

小程序 VS APP

  1. 安装使用
    1. 小程序：无需安装、无需卸载、简单易用、占用内存较小
    2. APP：需要主动联网下载安装APP、不想用了需要主动卸载
  2. 开发
    1. 小程序：跨平台(只要有微信即可)、开发门槛低、开发周期短、开发成本低（对初创企业来说，是个很好的选择）
    2. APP：开发成本高、每一个平台都要维护一套代码（目前也有ReactiveNative、Flutter等跨平台方案）
  3. 发布上线
    1. 小程序：提交到微信公众平台审核
    2. APP：提交到应用商店审核（Apple的App Store常有审核不通过的情况，审核周期也较长）
  4. 其他
    1. 小程序用户体验、功能丰富度、开放性不如APP

相关链接

  1. 开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/
  2. 开发指南
    1. https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a
  3. 开发工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
    1. 本课程用的工具版本：stable v1.02.1907300（暂无内置Emmet功能，智能提示还有待改善）
    2. 基础库版本：v2.8.3
  4. 官方 Demo：https://github.com/wechat-miniprogram/miniprogram-demo
    1. 如果不想看文档可以直接看官方的demo

开源项目

  1. 网友整理的资源列表
    1. https://github.com/opendigg/awesome-github-wechat-weapp
    2. https://github.com/justjavac/awesome-wechat-weapp
  2. UI 组件库
    1. 微信官方：https://github.com/Tencent/weui-wxss
    2. https://github.com/TalkingData/iview-weapp
    3. https://github.com/youzan/vant-weapp
    4. https://github.com/meili/minui
    5. https://github.com/wux-weapp/wux-weapp
    6. 高颜值：https://github.com/weilanwl/ColorUI
    7. 京东凹凸实验室：https://github.com/NervJS/taro-ui

开发一个简单的微信小程序

注册小程序

  1. 注册指南：https://developers.weixin.qq.com/miniprogram/introduction/
  2. 利用邮箱注册小程序：https://mp.weixin.qq.com/wxopen/waregister?action=step1
  3. 注册完毕后会有一个小程序的AppID（唯一标识）
    1. 登录->开发->开发设置->查看当前的AppID

创建一个项目

  1. 下载开发工具，并安装
  2. 打开“微信开发者工具”->添加一个项目
  3. 设置项目名称、目录、AppID、开发者模式、语言（JavaScript/TypeScript）

对JS代码进行断点调试

  1. 打开项目目录下app.js文件

    1. 删除测试代码如下：

       //app.js
 App({
   //程序的入口
   onLaunch: function () {
     console.log("小程序启动完毕");
   }
 })

  2. 方式一：在需要调试的地方加上一行 debugger代码

     //app.js
 App({
   //程序的入口
   onLaunch: function () {
     let a = 10;
     let b = 20;
     console.log("小程序启动完毕");
     //设置断点
     debugger;
     let c = a+b;
   }
 })
    1. 点击编译（command+B）即可重新运行到断点处
    2. 通过右下方的窗口可以执行下一步、进入等操作
    3. 也可以查看函数调用栈以及Scope下的局部以及全局变量的值。
  3. 方式二： 在对应的[sm]文件中打断点调试（[sm]文件是Source Map 处理之后的文件）
    1. 点击调试器->sources->查找项目目录，找到你要调试的文件（app.js）的sm文件，比如app.js?[sm],这个就是通过Source Map生成的调试文件
    2. 打开，就可以在指定的位置打断点，再次点击就是取消断点
  4. 方式三：
    1. 点击调试器->sources->查找项目目录，找到你要调试的文件（app.js）
    2. 在指定的位置打断点，会发现自动跳转到相应的sm文件中打断点
    3. 因此这种方法的本质还是第二种方法。

目录结构

  1. 小程序主要包含1个描述整体程序的app部分和多个描述各自页面的page部分 pic

app部分

  1. app部分由3个文件组成，必须放在项目的根目录（文件名固定） pic

page部分

  1. 即pages文件加下的内容代表页面个数
    1. index、logs分别代表2个页面

  2. 1个页面由4个文件组成（这4个文件必须具有相同的路径和文件名） pic

    1. wxml 相当于html
    2. json页面配置数据

尺寸单位

  1. 我们在开发页面的时候需要给控件设置尺寸，那么尺寸单位用什么呢？
  2. rpx（responsive pixel）:可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx
  3. 比如在iPhone6上，屏幕宽度为375px，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素 pic
  4. 官方建议：开发微信小程序时设计师可以用iPhone6作为视觉稿的标准

开发工具介绍

微信开发者工具

  1. 打开“微信开发者工具”
    1. 点击帮助->开发者文档
  2. 由于该工具暂无内置Emmet功能，智能提示还有待改善，因此可以使用VSCode开发
  3. 常用小技巧：
    1. 如何每次编译都编译指定的页面？
      1. 方法1： 通过修改app.json文件的"pages": []中的顺序，将正在开发的Page放在第一个
      2. 方法2：
        1. 在模拟器中打开当前正在编译的页面Page
        2. 在“微信开发者工具”上面工具栏的“普通编译”的右边下拉三角点击->添加编译模式->模式名称：自定义，可以为汉字
        3. 然后点击确定，这编译器每次编译，都会编译当前正在开发的Page
    2. 快速打开开发者文档：“开发者工具”->帮助->开发者文档
  4. 常见故障：
    1. 云开发控制台上传图片 Error: tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:1087
      1. 设置->代理设置->选择“不使用任何代理。。。”
  5. 小程序真机测试：
    1. 微信开发者工具上面有个“预览”，点击生成二维码
    2. 用微信扫描即可

VSCode开发工具

  1. 下载
  2. 安装插件
    1. 打开VSCode
    2. 查看->扩展->搜索“微信”
      1. 安装 minapp
      2. 安装小程序开发助手
    3. 安装ESLint：代码语法错误检查插件。
  3. vscode配置浏览器调试
    1. 查看->扩展->搜索“open”
    2. 安装open in browser即可
    3. 在vs的html代码中右击，就会出现：open in default browser、open in other browser，2个选项，就可以进行浏览器调试了

  4. VSCode中的智能提示：(百度搜索：emmet技巧、用法)

     1. 输入: div.container  输出结果： <div class="container"></div>
 2. 输入: div#container  输出结果： <div id="container"></div> 
 3. 输入： div>div.item*3  意思：一个div里面有3个div子元素，而且这3个div的class 属性为item ,输出结果如下：
     <div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
     </div>
 4. 输入：div.wechat{微信登录} 输出结果：<div class="wechat">微信登录</div>
 5. 输入： div>div.item+div.title 输出结果，一个div容器，下面有1个item子元素div，还有一个title子元素div：
        <div>
          <div class="item"></div>
          <div class="title"></div>   
        </div>  
 6. css属性也能这样输入：w72rpx+h72rpx
     .header image{
         /* 快速输入方法： w72rpx+h72rpx */
         height: 72rpx;
         width: 72rpx;
     }
 7. 直接写: .title 或者 #ttt 回车
     <div class="title"></div>
     <div id="ttt"></div>

  5. VSCode常用快捷键

     新建文件:   Ctrl+N

 文件之间切换:   Ctrl+Tab
    
 打开一个新的VS Code编辑器:    Ctrl+Shift+N
    
 关闭当前窗口:   Ctrl+W
    
 关闭当前的VS Code编辑器:   Ctrl+Shift+W
    
 切出一个新的编辑器窗口（最多3个):   Ctrl+\
    
 切换左中右3个编辑器窗口的快捷键:   Ctrl+1  Ctrl+2  Ctrl+3
  6. 开发调试技巧
    1. 用“微信开发者工具” 创建项目，以及创建新的模块，用VSCode编码
    2. 用“微信开发者工具”将调试器独立出来，然后“钉”在桌面
    3. 遇见布局问题，用“微信开发者工具”点击“调试器，选择Wxml，来查看每个控件的尺寸，来分析布局失败的原因

All content is licensed under CC BY-NC-SA

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents