微信小程序开发入门实战（一）小程序简介与实战准备阶段

客官°小女子只卖身不卖艺 2022-12-02 00:51 317阅读 0赞

**介绍**

2015年初，微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。给所有的 Web 开发者打开了一扇全新的窗户，让所有开发者都可以使用到微信的原生能力，去完成一些之前做不到或者难以做到的事情了。

JS-SDK是对之前的 WeixinJSBrige 的一个包装，以及新能力的释放。它解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力。

对于普通用户，小程序实现了应用的触手可及，只需要通过扫描二维码、搜索或者是朋友的分享就可以直接打开，加上优秀的体验，小程序使得服务提供者的触达能力变得更强。

对于开发者，我们可以根据微信提供的JS API，进行开发，也就是所谓的小程序开发。

微信小程序的主要开发语言是 JavaScript ，所以通常小程序的开发会被用来同普通的网页开发来做对比。两者有很大的相似性，对于前端开发者而言，从网页开发迁移到小程序的开发成本并不高，但是二者还是有些许区别的。

网页开发渲染线程和脚本线程是互斥的，这也是为什么长时间的脚本运行可能会导致页面失去响应，而在小程序中，二者是分开的，分别运行在不同的线程中。网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。

而如上文所述，小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同，所以一些 NPM 的包在小程序中也是无法运行的。

网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的。

大致的介绍后，我们开始为实战做好准备工作。

> 在开发之前，我们需要去申请开发AppID: 申请AppID。

**下载与创建**

首先，根据地址下载开发工具：微信开发者工具。

下来根据图文进行创建操作：（这里我起的名字是new-miniprogram）  
![新建][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 1]  
**创建结束：**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 2]

**使用npm（第三方包）**

初始化npm：在你所建项目的根目录下，使用npm init -y，初始化一下

> 执行npm init

开启“使用npm模块”(右上角详情-本地设置-勾选使用npm模块)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 3]

根目录下新建 node\_modules 文件夹: mkdir node\_modules

cd node\_modules 进入新建的 node\_modules，执行下面命令：

npm install miniprogram-datepicker --production miniprogram-datepicker

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 4]  
点开左上角工具->选中构建npm

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 5]

**完成构建**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 6]

成功后会在目录中生成一个miniprogram\_npm目录。

这时候你就可以使用诸如：vant-weapp等的小程序第三方库了。

我们可以根据vant-weapp的快速入门来尝试一下。

> 注：每当你通过 npm 安装一个第三方库时，记得别忘记重新构建一下（点开左上角工具->选中构建npm）

**引用vant-ui**

> 如果你不需要使用vant-ui，请跳过后面内容

npm/yarn安装（必需）：需要注意的是 package.json 和 node\_modules 必须在 miniprogram 目录下

通过 npm 安装
     npm i @vant/weapp -S --production
    
    通过 yarn 安装
     yarn add @vant/weapp --production
    
    安装 0.x 版本
     npm i vant-weapp -S --production

构建 npm 包（必需）：打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 7]  
修改app.json（必需）：将 app.json 中的 “style”: “v2” 去除，小程序的新版基础组件强行加上了许多样式，难以去除，不关闭将造成部分组件样式混乱。

修改 tsconfig.json（非必需）：如果你使用 typescript 开发小程序，需要在 tsconfig.json 中增加如下配置，防止 npm 构建后 tsc 编译报错

请将path/to/node\_modules/@vant/weapp修改为项目中 @vant/weapp 所在的目录

{ 
      "compilerOptions": { 
        "baseUrl": ".",
        "paths": { 
          "@vant/weapp/*": ["path/to/node_modules/@vant/weapp/dist/*"]
        }
      }
    }

**vant-ui使用**

以 Button 组件为例：只需要在app.json或index.json中配置 Button 对应的路径即可。如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
    // app.json
    "usingComponents": { 
      "van-button": "@vant/weapp/button/index"
    }
    
    // 通过下载源码使用 es6版本
    // app.json
    "usingComponents": { 
      "van-button": "path/to/@vant/weapp/dist/button/index"
    }
    
    // 通过下载源码使用 es5版本
    // app.json
    "usingComponents": { 
      "van-button": "path/to/@vant/weapp/lib/button/index"
    }

引用如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 8]  
引入组件后，可以在 wxml 中直接使用组件：  
![在这里插入图片描述][20200828170301953.jpg_pic_center]

使用组件如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 9]  
作者：言墨儿  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200828164923397.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A=,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/99ab6bd8db814473967da4d35e642813.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/d92687f1fb6c4dc697cf4bc7b34fbad8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/5cf392a7329a40e6a46d1ee8fcc8aff1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/80554c42b38c45748342d1058e8ef54e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/52ef52d3c8524c6695beec77d17e89f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/39c135aaf0d8422f94211e91366a7bd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/297a658b2742403ca44bf9039ef6d282.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/23ac503ae61c42d1bdd8ee6e523bdae0.png
[20200828170301953.jpg_pic_center]: /images/20221123/b1ca2c7198134a87996e0fe9c0c0aee8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p4Y2xjbGNpb3A_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/964bc3963c8d41588cd31d12a28c8a66.png