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

介绍

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）

创建结束：

使用npm（第三方包）

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

执行npm init

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

根目录下新建 node_modules 文件夹: mkdir node_modules

cd node_modules 进入新建的 node_modules，执行下面命令：

npm install miniprogram-datepicker --production miniprogram-datepicker

点开左上角工具->选中构建npm

完成构建

成功后会在目录中生成一个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 模块 选项，构建完成后，即可引入组件

修改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"
}

引用如图：

引入组件后，可以在 wxml 中直接使用组件：

使用组件如图：

作者：言墨儿
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。