简介
2015年初，微信发布了一套名为JS-SDK的完整网络开发套件，其中开放了数十种拍摄，录制，语音识别，QR码，地图，付款，共享，优惠券等API。它为所有Web开发人员打开了一个新窗口，因此所有开发人员都可以使用微信的本机功能来完成以前无法完成或难以完成的事情。
JS-SDK是以前的WeixinJSBrige和新功能发布的包装。它解决了移动网页功能不足的问题，并通过公开微信的界面使Web开发人员具有更多功能。
对于普通用户，小程序意识到该应用程序触手可及。您可以通过扫描QR码，搜索或与朋友分享来直接打开它。凭借出色的经验，小程序使服务提供商的到达能力变得更强。
对于开发人员，我们可以根据微信提供的JS API进行开发，这就是所谓的小程序开发。
微信小程序的主要开发语言是JavaScript，因此通常将小程序开发与普通的Web开发进行比较。两者有很大的相似之处。对于前端开发人员，从Web开发迁移到小程序的开发成本并不高，但是两者之间仍然存在一些差异。
Web开发渲染线程和脚本线程是互斥的，这就是长时间运行脚本可能导致页面失去响应的原因。在小程序中，两者是分开的，并且在不同的线程中运行。 。 Web开发人员可以使用各种浏览器公开的DOM API来选择和操作DOM。如上所述，小程序的逻辑层和渲染层是分开的。逻辑层运行在JSCore中，并且没有完整的浏览器对象，因此缺少相关的DOM API和BOM API。这种差异导致一些前端开发非常熟悉的库，例如jQuery，Zepto等，无法在小程序中运行。同时，JSCore的环境与NodeJS的环境不同，因此某些NPM软件包无法在小程序中运行。
Web开发人员需要面对的环境是各种浏览器。 PC端需要面对IE，Chrome，QQ浏览器等，而移动端需要面对Safari，Chrome，iOS和Android系统。各种WebView。 小程序开发过程需要面对两个主要操作系统iOS和Android的微信客户端，以及用于协助开发的小程序开发人员工具。 小程序中的三个主要操作环境也有所不同。
总体介绍后，我们开始为实际战斗做准备。
在开发之前，我们需要申请开发AppID：申请AppID。
下载并创建
首先，根据以下地址下载开发工具：微信开发人员工具。
接下来，基于图形和文本创建操作：（在这里，我将其命名为new-miniprogram）
新
创建
创建结束：
创建结束
使用npm（第三方软件包）
初始化npm：在要构建的项目的根目录中，使用npm init -y对其进行初始化。
执行npm init
打开“使用npm模块”（详细信息在右上角本地设置-选中“使用npm模块”）
使用npm模块
在根目录中创建一个新的node_modules文件夹：mkdir node_modules
cd node_modules进入新创建的node_modules，执行以下命令：
npm install miniprogram-datepicker --production
miniprogram-datepicker
点击左上角的工具->选择构建npm
点击左上角的工具->选择构建npm
完成构建
完成构建
成功后，将在该目录中生成一个miniprogram_npm目录。
目前，您可以使用小程序第三方库，例如vant-weapp。
我们可以根据vant-weapp的快速入门进行尝试。
注意：每当您通过npm安装第三方库时，请记住要对其进行重建（单击左上角的工具->选择build npm）
引用vant-ui
如果您不需要使用vant-ui，请跳过以下内容
npm / yarn安装（必需）：请注意，package.json和node_modules必须位于小程序目录中
# 通过 npm 安装npm i @vant/weapp -S --production# 通过 yarn 安装yarn add @vant/weapp --production# 安装 0.x 版本npm i vant-weapp -S --production
构建npm软件包（必需）：打开微信开发人员工具，单击“工具”->“构建npm”，然后选中“使用npm模块”选项，在构建完成后，您可以导入组件
构建npm软件包
修改app.json（必需）：删除app.json中的“样式”：“ v2”，小程序的基本组件的新版本强行添加了许多样式，这些样式很难删除，这会导致如果您不将其混淆，则会发现一些组件样式。
修改tsconfig.json（不是必需的）：如果使用打字稿开发小程序，则需要在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中使用该组件：
按钮
使用如图所示的组件：
使用范按钮
结论
提醒：请稍后关注一些令人兴奋的事情，请注意我的主题：web前端。如果您有任何评论，可以发表评论，我将认真对待每一个评论。
第二部分：微信小程序开发实战简介（二）小程序代码组成和基础知识