用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2020-8-28 15:57

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

介绍

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模块)


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

成功后会在目录中生成一个miniprogram_npm目录。

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

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

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

引用vant-ui

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

npm/yarn安装(必需):需要注意的是 package.json 和 node_modules 必须在 miniprogram 目录下


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

修改app.json(必需):将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。

修改 tsconfig.json(非必需):如果你使用 typescript 开发小程序,需要在 tsconfig.json 中增加如下配置,防止 npm 构建后 tsc 编译报错
请将path/to/node_modules/@vant/weapp修改为项目中 @vant/weapp 所在的目录


vant-ui使用

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


引用如图:

引入组件后,可以在 wxml 中直接使用组件:


使用组件如图:

作者:言墨儿

来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏