本期主要内容

1.微信公众平台

2.微信小程序开发环境搭建

3.微信小程序组件

1.微信公众平台

1.1 微信公众平台概述

微信公众平台，是基于腾讯提供的微信服务器和客户端APP，由更多的第三服务提供者加入，为广大的微信客户端提供咨讯和服务的平台。

微信公众平台域名：mp.weixin.qq.com

微信公众平台的服务类型：

• 服务号，对客户提供一对一的服务，如中国移动、中国联通、招商银行等。

• 订阅号，向所有的订阅者提供免费的咨讯服务，如前端大全、 MSDN 等

• 小程序，在微信客户端提供类似 APP 功能，达到"用完即走"的目的

• 企业号，为企业内部员工提供日常办公支持，可与微信、支付等互通。

1.2 微信小程序的历史

• 2010年微信内自带 WebView组件（其本质就是HTML/CSS/JavaScript的解释器）提供网页浏览服务，其在微信内部成为网页的标准，但未公开。

• 2015年,腾讯公开一套网页开发工具包，称为JS-SDK,开放了拍摄、录音、支付等功。

• 2017年推出微信小程序

• 2019年支付宝、头条等陆续推出了小程序

1.3 微信小程序与网页的开发的区别

2.微信小程序开发环境搭建

2.1 注册微信小程序开发者

A.注册全新邮箱(或者使用没有在微信公众平台注册过的邮件，如 QQ 邮箱)

B.在微信公众平台注册开发者账号，步骤如下：

项目目录名称中禁止出现中文、空格等特殊符号

2.2 创建微信小程序项目

2.3 微信小程序目录结构

• .json ,静态配置文件

• app.json，整个项目的全局配置文件

• page.json,每个页面专用的配置文件（如index.json、logs.json），可覆盖全局配置

• .js/.ts,脚本文件

• app.js，整个小程序应用的入口脚本文件

• page.js,每个页面专用的脚本文件,如index.js、logs.js等

• .wxml，页面的模板文件（不能使用HTML标签，只使用小程序专用的标签）

• .wxss，页面的样式文件

• app.wxss,整个小程序应用的全局样式文件

• page.wxss,每个页面的样式文件，可覆盖全局样式

app.json、app.js、app.wxss必须在小程序应用的根目录下

2.4 JSON

JSON官网：www.json.org/json-en.htm…

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。

JSON支持的数据结构有：Array和Object

JSON支持的数据类型有：string、number、boolean、null、array、object

string必须括在英文双引号之间

Number类型的结构如下：

2.5 全局配置

全局配置存储在app.json文件内，示例结构如下：

{

    "pages":[],

    "window":{

        "navigationBarTitleText": "标题文本内容 ",

        "navigationBarTextStyle":"标题文本颜色(white|black)",

        "navigationBarBackgroundColor": "标题背景颜色",

        "backgroundTextStyle":"loading的样式(dark|light)",

        "enablePullDownRefresh":true,

        "backgroundColor": "背景颜色"

    },

    "tabBar":{

        "list":[

            {

                "text": "显示文本",

                "pagePath": "链接页面路径",              

                "iconPath": "默认显示的图标路径",

                "selectedIconPath": "被选定时显示的图标路径"

            }

        ]

    }

}

pages属性用于指定小程序中的页面组成，每个页面默认包括page.json、page.js、page.wxss及page.wxml文件。数组的第一项代表小程序的初始页面（首页）

window属性用于进行窗口的配置，为object类型，包含有：

•navigationBarTitleText,控制标题的文本内容

•navigationBarTextStyle,控制标题的文本样式（black|white）

•navigationBarBackgroundColor，控制标题的背景颜色

•backgroundTextStyle，用于控制下拉刷新时的loading的样式(light|dark)

•enablePullDownRefresh,用于控制是否开启全局下拉刷新(也可以page.json中对于某个页面进行单独的配置)

•backgroundColor,窗口的背景颜色

tabBar属性用于设置小程序底部选项卡，为object,包含list属性，在list属性需要罗列底部选项卡信息（选项卡数量至少两个，至多五个）,包含有以下信息：

•text，控制底部选项卡显示的文本

•pagePath，控制底部选项卡的链接页面路径（必须保证在路径已经在pages中存在）

•iconPath，控制正常显示选项卡图片

•selectedIconPath,控制被选定的选项卡图片

除此之外，在tabBar中还有包含以下属性：

•color，控制底部选项卡文本正常显示的颜色

•selectedColor，控制被选定的底部选项卡文本的颜色

•backgroundColor，控制底部选项卡的背景颜色

•borderStyle,控制底部选项卡中顶部边框线的颜色(black|white) app.json的示例代码如下：

{

 "pages": [

   "pages/index/index",

   "pages/page01/page01",

   "pages/logs/logs"

 ],

 "window": {

   "navigationBarTitleText": "学子影院",

   "navigationBarTextStyle": "white",

   "navigationBarBackgroundColor": "#0aa1eb",

   "backgroundTextStyle": "light",

   "enablePullDownRefresh": true,

   "backgroundColor": "#e5e5e5"

 },

 "tabBar": {

   "color": "#000",

   "selectedColor": "#0aa1eb",

   "backgroundColor": "#fff",

   "borderStyle":"black",

   "list": [

     {

       "text": "首页",

       "pagePath": "pages/index/index" ,

       "iconPath" :"images/index_disabled.png",

       "selectedIconPath":"images/index_enabled.png"

     },

     {

       "text": "购物车",

       "pagePath": "pages/page01/page01"  ,

       "iconPath" :"images/cart_disabled.png",

       "selectedIconPath":"images/cart_enabled.png"    

     }

   ]

 }, 

 "style": "v2",

 "sitemapLocation": "sitemap.json"

}

2.6 sitemap.json

sitemap.json用于设置微信爬虫的爬取规则。

sitemap.json的文档结构如下：

{

	"rules":[

		{

			"page":"页面的路径",

            "action":"动作",

            "params":[],

            "matching":"匹配规则(exact|inclusive|exclusive|partial)"

		}

	]

}

可配置project.config.json中的checkSiteMap属性禁用siteMap属性

3.微信小程序组件

• <view>组件

<view>组件视图容器组件，语法结构是：

<view 

      hover-class="按下去的样式类"

      hover-start-time="按下去多长时间出现点击状(50ms)"

      hover-stay-time="手指松开后点击状态的保留时间(400ms)">

    ...

</view>

示例代码如下：

<--page.xwml代码如下：-->

    

<view 

  class="container"

  hover-class="hover"

  hover-start-time="3000"

  hover-stay-time="5000">

  view组件是视图容器组件，类似于HTML中DIV

</view>



/*page.wxss的代码如下:*/

.container{

  width:200px;

  height: 200px;

  border:2px solid #f00;

}

.hover{

  border:2px dotted #00f;

}

• 组件

组件是图片组件，支持GIF、JPG、PNG、WEB、SVG格式的文件，语法结构如下：

<image src="图像的URL地址"></image>