详细安装微信小程序以及微信小程序基础(1)

1.小程序是什么?

微信小程序,简称小程序,是一种不需要下载安装就可以使用的应用;

2.为什么用小程序?

​ 2-1.微信有很多用户,在微信里开发产品更容易接触用户;

​ 2-2.推广app成本太高;

​ 2-3.开发的适配成本低;

​ 2-4.容易⼩规模试错，然后快速迭代。

​ 2-5.可以跨平台使用;

3.官网

3-1: 官网:https://mp.weixin.qq.com/

3-2:微信者开发工具:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=828501313&lang=zh_CN

3-3.下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315

4.其他的小程序?

​ 4-1.支付宝小程序

​ 4-2.百度小程序

​ 4-3.QQ小程序

​ 4-4.今日头条+抖音小程序

5.小程序的环境准备?

​ 开发微信⼩程序之前，必须要准备好相应的环境;

​ 5-1:注册账户

​ 使用一个新的邮箱(没有注册过其他的小程序或者公众号)

5-2.获取APPId

​ 官网:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=828501313&lang=zh_CN

​ 由于后期调⽤微信⼩程序的接⼝等功能，需要索取开发者的⼩程序中的APPID,可 登录,然后获取APPId;登录成功看到下面画面:

5-3.开发者工具

6.第一个微信小程序

​ 6-1.打开微信开发者⼯具

​ 注意 第⼀次登录的时候需要扫码登录

​

6-2.新建⼩程序项⽬

6-3填写项⽬信息

6-4.成功

7.微信开发者⼯具介绍?

详细使用,看官网:

https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

8.⼩程序结构⽬录

小程序框架的目标是通过简单高效的方式让开发者在微信中开发具有原生app体验的服务;

8-1:⼩程序⽂件结构和传统web对⽐

从上看出传统是三层结构,微信小程序是四层,多了个.json;

8-2.基本项目目录

9.小程序配置文件

​ 他有两种配置文件,一种是全局的app.json ,一种是页面自己的page.json;

​

​ 注意 :

​ 1.pages----用来描述文件的路径;

​ 2.window----定义窗口(顶部)背景颜色,文字颜色

​ 完整配置参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

9-1-1.tabbar

官网:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

9-1-2.页面配置 page.json

指的是为每个单独的页面设置背景颜色,文字等;

9-1-3.setmap配置

sitemap.json⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引;

配置官网:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

10.模板语法

10-1.数据绑定

​ 10-1-1:普通写法

 <view>{
  {msg}}