微信小程序开发指南

Myth丶恋晨 2022-10-30 15:23 216阅读 0赞

> 业精于勤 荒于嬉

*微信小程序开发可以说是前端的必备技能，但我认为，技术这种东西真的是可遇不可求，工作中能够遇到那真的是幸运的事，很多技术自己私下扩展，无奈工作中不能展示，基本处于了解的状态了。在做Android的时候就了解了微信小程序，是时候整理整理更近一步了。*

## 什么是微信小程序 ##

额，微信小程序就是你所用的所了解的那样，依赖微信App的生态环境，类似嵌在微信App中的一种小的app mini program,基于微信的生态，微信提供了很好的支持，有功能强大的组件 API 可以用，微信小程序生态，达到一小时开发一个项目的能力。虽然有点夸张，但不是不可以。

## 微信小程序与普通网页的区别 ##

*  微信小程序渲染层和逻辑层是分开的，逻辑层运行在JSCore ,使用不了浏览器DOM BOM 的API ，和我们前端一些熟悉的库
 *  JSCore 和 NodeJS环境不同，因此一些npm 包在小程序中无法运行
 *  微信小程序和普通网页的运行环境不同

微信小程序运行环境

<table> 
 <tbody> 
  <tr> 
   <td style="width:142pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">运行环境</span></p> </td> 
   <td style="width:142.05pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">逻辑层</span></p> </td> 
   <td style="width:142.05pt;"> <p style="margin-left:0pt;"><span style="color:#000000;">渲染层</span></p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:142pt;"> <p style="margin-left:0pt;">IOS</p> </td> 
   <td style="vertical-align:top;width:142.05pt;"> <p style="margin-left:0pt;">JavaScriptCore</p> </td> 
   <td style="vertical-align:top;width:142.05pt;"> <p style="margin-left:0pt;">WKWebView</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:142pt;"> <p style="margin-left:0pt;">Android</p> </td> 
   <td style="vertical-align:top;width:142.05pt;"> <p style="margin-left:0pt;">V8</p> </td> 
   <td style="vertical-align:top;width:142.05pt;"> <p style="margin-left:0pt;">Chromium 定制内核</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;width:142pt;"> <p style="margin-left:0pt;">小程序开发者工具</p> </td> 
   <td style="vertical-align:top;width:142.05pt;"> <p style="margin-left:0pt;">NWJS</p> </td> 
   <td style="vertical-align:top;width:142.05pt;"> <p style="margin-left:0pt;">Chrome WebView</p> </td> 
  </tr> 
 </tbody> 
</table>

## 如何开始微信小程序 ##

### 申请账号 ###

注册页面按需操作即可： [https://mp.weixin.qq.com/wxopen/waregister?action=step1][https_mp.weixin.qq.com_wxopen_waregister_action_step1]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

注册完成后，在开发管理中找到自己的向程序配置 [https://mp.weixin.qq.com/wxamp/devprofile/get\_profile?token=1342371342&lang=zh\_CN][https_mp.weixin.qq.com_wxamp_devprofile_get_profile_token_1342371342_lang_zh_CN] 查到自己的appId

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

### 安装开发工具 ###

[开发者工具安装][Link 1] [https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][Link 1]

以上下载就OK 了 ，打开开发工具，**微信扫描登录就是这了。**创建自己的项目就知道应该怎么做了。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2][]

### 小程序HelloWorld ###

有了开发工具可以开发自己的小程序了，创建小程序 固定项目名称 项目存放位置 **AppID（开发管理模式中的AppID）** 开发模式 是否使用云服务（先选择不适用云服）

**创建程序**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3][]

**项目目录**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 4][]

你的第一个小程序到这就完成了 ，更多的好玩的就研究官方文档多摸索吧。

### 微信小程序代码构成 ###

根据以上的项目目录，能够发现项目中有很多的配置文件

1.  `.json` 后缀的 `JSON` 配置文件
2.  `.wxml` 后缀的 `WXML` 模板文件
3.  `.wxss` 后缀的 `WXSS` 样式文件
4.  `.js` 后缀的 `JS` 脚本逻辑文件

**JSON配置**

JSON 是一种数据格式，在微信小程序中 JSON 扮演静态配置的角色。根据项目目录，初始配置中有app.json project.config.json ，index 文件夹下有index.json

**`app.json` 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。**

quickStart 中项目的app.json 如下

{
      "pages":[
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle":"black"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

**WXML 模板**

WXML在小程序中充当 HTML 的角色，页面的模板。pages/index/index.wxml 示例代码如下

<view class="container">
      <view class="userinfo">
        <button wx:if="{
       {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx:else>
          <image bindtap="bindViewTap" class="userinfo-avatar" src="{
       {userInfo.avatarUrl}}" mode="cover"></image>
          <text class="userinfo-nickname">{
       {userInfo.nickName}}</text>
        </block>
      </view>
      <view class="usermotto">
        <text class="user-motto">{
       {motto}}</text>
      </view>
      <view>
      <text>地图地图</text>
      <map></map>
      </view>
    </view>

这就是模板，微信小程序同样也实现了逻辑层和渲染层的分离 ，和HTML 相似但不同

1.  标签名字有点不一样
    
    往往写 HTML 的时候，经常会用到的标签是 `div`, `p`, `span`，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。换个思路，既然大家都需要这些组件，为什么我们不能把这些常用的组件包装起来，大大提高我们的开发效率。
    
    从上边的例子可以看到，小程序的 `WXML` 用的标签是 `view`, `button`, `text` 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
    
    更多详细的组件讲述参考下个章节 [小程序的能力][Link 2]
2.  多了一些 `wx:if` 这样的属性以及 \{ \{ \}\} 这样的表达式
    
    在网页的一般开发流程中，我们通常会通过 `JS` 操作 `DOM` (对应 `HTML` 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，`JS` 会记录一些状态到 `JS` 变量里边，同时通过 `DOM` API 操控 `DOM` 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式，因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 `JS` 直接操控 `DOM`，`JS` 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
    
    小程序的框架也是用到了这个思路，如果你需要把一个 `Hello World` 的字符串显示在界面上。

**WXSS 样式**  
`WXSS` 具有 `CSS` 大部分的特性，小程序在 `WXSS` 也做了一些扩充和修改。

1.  新增了尺寸单位。在写 `CSS` 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。`WXSS` 在底层支持新的尺寸单位 `rpx` ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2.  提供了全局的样式和局部样式。和前边 `app.json`, `page.json` 的概念相同，你可以写一个 `app.wxss` 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 `page.wxss` 仅对当前页面生效。
3.  此外 `WXSS` 仅支持部分 `CSS` 选择器

**JS逻辑交互**

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 `JS` 脚本文件来处理用户的操作。

>     <view>{
>         { msg }}</view>
>     <button bindtap="clickMe">点击我</button>

点击 `button` 按钮的时候，我们希望把界面上 `msg` 显示成 `"Hello World"`，于是我们在 `button` 上声明一个属性: `bindtap` ，在 JS 文件里边声明了 `clickMe` 方法来响应这次点击操作：

>     Page({
>       clickMe: function() {
>         this.setData({ msg: "Hello World" })
>       }
>     })

以上是事件响应的小例子。

### 官方文档必须看 ###

[微信小程序官方文档][Link 3] [https://developers.weixin.qq.com/miniprogram/dev/framework/][Link 3]

> 积跬步 至千里

![20210220141440251.jpg][]

[https_mp.weixin.qq.com_wxopen_waregister_action_step1]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221024/fcbaad1fedc6498e928a318b5e31b71d.png
[https_mp.weixin.qq.com_wxamp_devprofile_get_profile_token_1342371342_lang_zh_CN]: https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=1342371342&lang=zh_CN
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/64e67c6e9db9444992d71ae51999ba66.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/13ac71121c3a448c942d347e8b1a9305.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/331a5203903e41348effbafb556130dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/e9c16952b5a448e9b57575623151e8a9.png
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html
[Link 3]: https://developers.weixin.qq.com/miniprogram/dev/framework/
[20210220141440251.jpg]: /images/20221024/040d3c461b134053b65e9e07d30192a4.png