微信小程序基础入门（1）含优势介绍、环境搭建、与vue对比及vant weapp框架初步使用

微信小程序开发

小程序的诞生带来了互联网产品新一轮的变革，小程序正发挥着日益重要的作用。

最近珺珺问我她想学习微信小程序开发，但是不知道从何下手，本文我将介绍微信小程序的优点及开发环境的搭建。

小程序是什么，相信不用做太多介绍了，下面直入主题。(注：蓝色字体代表链接)

一、微信小程序的优点:

1、用户体验好：便捷地获取服务，无需安装卸载，即用即走；

2、流量获取易：背靠10亿+微信用户；

3、开发成本低：节省大量资金、时间、人力，从而做好自己的产品；

4、微信生态强：微信生态体系、多渠道实现营销推广，节省推广成本；

5、具有更丰富的功能和出色的使用体验，也会降低用户的使用难度；

6、无跨端限制：兼任IOS、Android等系统；

7、无需下载，用完即走：实现了应用“触手可及”的梦想，用户扫一扫或搜一搜即可使用；

……

小程序与微信公众号相比，具有的优势

1、公众号加载速度慢，用户体验远不如小程序的瞬时打开;

2、公众号的用户入口太深，订阅号折叠。而小程序只需扫二维码或搜索即可进入；

3、公众号只能退出后才能进入聊天框，而小程序可与微信聊天框实时切换；

4、公众号数据不能实时上传，而小程序离线后数据实时上报，及时掌握运营状态；

5、公众号接口少，开放功能少，而小程序接口多，功能强大；
……

二、搭建微信小程序开发环境

1、首先需要在微信小程序官方平台【微信公众平台】注册登录你的账号。

微信公众平台:

2、随后进入开发选项，找到你的专属APPID 。
在这里插入图片描述

3、接下来进入工具选项，下载微信开发者工具，这里推荐新手根据个人电脑操作系统使用稳定版本。

开发者工具:
在这里插入图片描述

4、创建项目：项目名称自拟，选择路径后将此前注册查找到的个人APPID填入，当然你也可以选择使用测试号体验。新手入门推荐选择不使用云开发模式。

在这里插入图片描述

目录结构:

在这里插入图片描述

全局配置设置:

创建页面的方式有两种

1通过app.json 创建页面

输入路径后系统会自动生成项目文件
在这里插入图片描述

2、直接创建页面

在pages文件下右击创建文件夹后右击创建page文件，文件名均可自拟。

在这里插入图片描述

window

用于设置小程序的状态栏、导航条、标题、窗口背景色等。

在这里插入图片描述

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
在这里插入图片描述

点击链接即可跳转到微信小程序官方文档查看

页面元素:

页面逻辑处理

页面样式处理

页面间的路由跳转传值:

在这里插入图片描述

快捷键设置:

在这里插入图片描述

组件:

组件在component文件下设置
在这里插入图片描述

生命周期函数

快速开发框架:

这里推荐有赞团队推出的Vant weapp UI框架，通过官方文档教程，npm下载相应的包之后即可使用。

在app.json或index.json中引入组件后，复制框架代码即可使用UI框架，快速上手搭建前端页面。
在这里插入图片描述

参考:

[1]韩舶.微信小程序发展现状及其前景探析[J].数字传媒研究,2020,37(08):5-9.

微信小程序入门开发超详细笔记(一)

微信小程序官方文档

三、Vue&微信小程序

vue.js和微信小程序开发有很多相似之处，如下图，推荐将两者进行对比学习：
在这里插入图片描述

与vue对比

序号	差异	vue框架	微信小程序
1	样式	`style标签`	`.wxss文件`
2	行为	`script标签`	`.js文件`
			`< wxs >标签`
3	结构	`template标签`	`.wxml文件`
4	盒子	`div`	`view`
5	文本	`span`	`text`
6	属性绑定	`<span :title='lay'></span>`	`<text title='{{msg}}'></text>`
7	流程分支	`v-for`	`wx:for`
8	判断	`v-if()=''/v-else`	`wx:if='{{}}'/wx:else`
9	显示隐藏	`v-show=''`	`hidden='{{}}'`
10	生命周期	`8种`	`应用3种+页面5种+组件6种`
11	编程式路由	`v-show=''`	`hidden='{{}}'`
12	组件式路由	`<router-link to='地址'></router-link>`	`<navigator url="地址"></navigator>`
13	路由参数	`<router-link to='地址?id=1'></router-link>`	`<navigator url="地址?id=1"></navigator>`
14	网络请求	`axios`	`wx.request()`
15	绑定事件	`@click`	`bindtop=''`
16	双向绑定	`v-model=''`	`bindinput=''`
17	获取data数据	`this.msg`	`this.data.msg`
18	设置data数据	`this.msg=''`	`this.setdata({msg:''})`
19	创建方法	`methods:{test(){}}`	`与data同级直接创建`