微信小程序 —— 第一天

微信小程序 - Unit01

1.微信公众平台

1.1 概述

微信公众平台，是基于微信服务器给个人、企业和组织提供用户管理及业务服务的服务平台。

微信公众平台的账号类型包括：

· 服务号，为企业和组织提供强大的业务服务和用户管理能力，主要偏向于服务类交互，如中国移动、中国联通、招商银行等。

· 订阅号，为媒体和个人提供一种全新的信息传播方式，主要偏向于咨讯传达，如CSND、前端大全、达内教育等。

· 小程序，为企业、组织和个人提供一种无需安装即可使用的、具有原生APP体验的服务，达到"用完即走"的目的，如大众点评、KFC等

微信公众平台官网： https://mp.weixin.qq.com

1.2 小程序接入

A.微信公众平台注册开发者 (https://mp.weixin.qq.com)

B. 填写注册信息

C.邮箱激活

D.登记主体信息

1.3 创建第一个小程序项目

A.下载并且安装开发者工具(https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

B.登录开发者工具

C.新建小程序项目

AppID在小程序开发者控制台->开发->开发设置->AppID

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hSkPZ0Dw-1620637458545)(assets/image-20201118142904865.png)]

2.小程序的文件构成

小程序(MiniProgram)在不分包的情况下最大2MB(是所有小程序内所以资源(包括图片、音频、视频等)的字节数)；在分包的情况下最大20MB

小程序代码由以下文件类型构成：

· .json文件

​ .json文件是静态配置信息文件

​ app.json，全局配置信息文件

​ page.json，页面配置信息文件，页面配置优于全局配置。

· .wxml文件

​ .wxml文件在小程序开发中充当HTML角色，.wxml文件用于实现微信页面的结构。

​ .wxml文件中不能使用任何的HTML标签，只能使用小程序专用的标签。

· .wxss文件

​ .wxss文件在小程序开发中充当CSS角色，.wxss文件用于实现微信页面元素的修饰。

​ .wxss基本上与CSS相同

​ app.wxss，作为全局样式，作用于当前小程序所有页面。

​ page.wxss，作为页面样式，仅作用于当前页面，页面样式优于全局样式

· .js/.ts文件

​ .js/.ts文件是脚本文件，用于实现交互逻辑。

​ app.js文件是小程序的入口脚本文件

​ page.js文件是页面的脚本文件

app.json、app.wxss、app.js必须存储在小程序的根目录下！

3. app.json

app.json文件是全局配置信息文件，其必须存储在小程序的根目录内。

app.json中规定了所有页面的路径、界面表现、底部tabBar等信息。其结构形如：

{
	"pages":[
        "pages/index/index",
        "pages/list/list",
        "pages/me/me"
    ]
}

3.1 pages属性

pages属性用于指定小程序由哪些页面组成以及每个页面的存储位置，array类型

在默认情况下，数组的第一项代表小程序的初始页面(首页)

3.2 window属性

window属性用于设置小程序的导航栏信息、窗口背景颜色，object类型

· navigationBarTitleText属性用于设置导航栏标题文本，string类型

· navigationBarBackgroundColor属性用于设置导航栏背景颜色，string类型

· navigationBarTextStyle属性用于设置导航栏标题文本颜色，string类型 ，其值只能为black或white

· enablePullDownRefresh属性用于设置是否开启下拉刷新，boolean类型

· backgroundTextStyle属性用于设置下拉loading的样式，string类型，其值只能为light或dark

· backgroundColor属性用于设置窗口的背景颜色，string类型

3.3 tabBar属性

tabBar属性用于设置底部选项卡，object

tabBar至少包含两个、至多五个选项卡

tabBar的icon的字节数不能超过40KB

tabBar的icon尺寸建议81x81，且不支持网络图片

· color属性用于设置文本的默认颜色

· selectedColor属性用于设置选定时文本的颜色

· list属性用于设置tabBar的数量及链接路径，object array类型，每一个选项卡是object类型，包括：

​ · text属性用于设置底部选项卡的显示文本， string类型

​ · pagePath 属性用于设置底部选项卡的链接页面，string类型

必须保证页面已经在pages中存在

不能使用绝对路径

​ · iconPath属性用于设置正常显示的图标的路径，string类型

​ · selectedIconPath属性用于设置选定时显示的图标的路径，string类型

预习小程序的组件(view、image、navigator、form、input等)

不能使用绝对路径

​ · iconPath属性用于设置正常显示的图标的路径，string类型

​ · selectedIconPath属性用于设置选定时显示的图标的路径，string类型

预习小程序的组件(view、image、navigator、form、input等)

https://developers.weixin.qq.com/miniprogram/dev/component/