专业小程序设计开发——助力新电商新零售

电话+V：159999-78052，欢迎咨询聊天小程序教程图片素材，[小程序设计与开发]，[小程序投流与推广]，[小程序后台搭建]，[小程序整套源码打包]，[为个体及小微企业助力]，[电商新零售模式]，[小程序运营推广及维护]

一、微信创意表情制作教程分享

微信最近新出了创意表情的玩法，很多小伙伴不知道在哪里可以制作自己独一无二的表情，下面小编给大家带来了详细的教程，感兴趣的小伙伴不要错过，赶快来看一下吧！

微信创意表情制作教程分享

1、打开微信，点击消息界面右上角的“搜索”按钮；

2、输入“微信创意表情”，选择小程序，点击进入微信创意表情小程序；

3、勾选“微信创意表情包编辑器服务协议”，点击“开始”；

4、打开该小程序后，就可以自定义制作微信表情了。

5、用户可以自定义选择微信官方表情为素材，加以不同的眼睛、眉毛、嘴巴、身体手势、配饰制作表情包，还能自定义添加文本和涂鸦。

6、制作完成后点击「就这样」，就可以添加到自己的微信表情，然后在微信聊天的过程中，就可以找到该表情包发送了。

二、5个不太正经的微信小程序，每款都精心挑选，请低调使用

微信小程序如果善用起来，比app还好用。不仅不占内存，功能也差不多，打开使用的话更方便。

这里就来分享5个不太正经的微信小程序，每款都是精心挑选的，请你低调使用哦。

照片添加相框、画框

日常拍照的时候，觉得照片总缺点什么，不妨使用这款小程序，给照片添加一个精美的相框，看起来更精致。相框的样式很丰富：国画、卷轴、油画等，还能选择不同的颜色卡纸，给照片添加背景、场景哦，非常实用。

图片整理、分享

这是一个非常好用的群相册服务功能，可以用来整理图片，不占内存。主要是建立在一个群聊的基础上，群成员可以自由分享、查看照片，更像是在一起的回忆存储器。

图片制作、设计

在线制作图片的一个小程序，在这里你可以找到各行各业的图片素材，用来做海报、插画、电商图片或者头像都很不多。最重要的一点是制作方法很简单，即使是小白也能做出很好看的图片来。

图片文字提取

再也不用去复印店了，想要提取图片中的文字，可以直接导入图片或者直接对准纸质档文件拍摄，然后确定下文字识别的区域，点击立即识别，就可以将文字内容提取出来，保存为电子档。

小工具集合软件

这个小程序里有很多好用的工具，不管是生活、工作，还是娱乐都有。比如投票、抽奖、棋牌记分、归属地查询以及语音翻译等等，每一项功能都很实用，使用方法也很简单，点击选择一个功能，就可以直接使用了。

5个不太正经的微信小程序，每款都精心挑选，请低调使用，赶紧收藏起来吧。

微信小程序入门1

从今天开始小编将带大家一起来学习微信小程序的开发，作为依托于微信的产品，微信小程序的热度的确是不容忽视的，而且推广的话也会有很多优势，毕竟不用像app一样要安装那么麻烦，只要把微信打开即可以使用，那么接下来咱们就来一睹微信小程序的风采吧。

二、开通微信公众号并下载微信开发者工具

首先我们需要打开微信公众号，然后注册一个订阅号即可，注册完毕后登录并进入公众号后台，如图：

然后选择开发者工具，并选择开发者文档，如图：

此时，打开新页面后选择小程序，如图：

然后我们选择工具选项，如图：

然后选择微信开发者工具，如图：

点击它，然后就来到了微信开发者工具的版本下载位置，如图：

我们选择稳定版，下载好后安装它，如图：

选择安装位置，如图：

点击安装，此时静静等待安装即可，安装好后，直接点击运行，第一次运行会弹出一个二维码框，如图：

然后我们用绑定这个公众号的微信号来扫码，如图：

然后我们点击加号，此时就可以创建小程序，如图：

这里有一个appid，我们可以通过小程序来获取，首先我们退出公众号的登录，然后点击小程序，如图：

然后点击前往注册，如图：

这里我们可以选择申请测试号，然后扫个码即可，不过由于这里小编已经有了测试号，因此直接扫码登录即可，如图：

此时就可以把这个AppID填写进去了，点击确定就可以打开开发者工具了，如图：

三、项目文件结构我们来看下项目中的文件所代表的意思，如下：

pagesindexindex.js页面jsindex.json页面配置index.wxml页面结构index.wxss页面样式logslog.js日志jslog.json日志配置log.wxml日志结构log.wxss日志样式utilutil.js公用js.eslintrc.jseslint配置，检查es6中的语法错误app.js全局jsapp.json静态全局配置app.wxss全局样式文件project.config.json开发者工具的配置sitemap.json是否被微信索引小程序主要是从app.js文件中获取用户数据，从app.wxss中设置界面样式，从app.json中配置跳转的第一个页面，默认跳转page标签里的index.wxml页面。当然你可以自行配置。

四、小程序测试上线发布当一切都准备完毕后，如果我们想要在手机上测试自己的小程序的时候，只需要点击预览即可，如图：

然后就可以在手机上看到效果了；我们从我们创建的小程序可以看到，此时的小程序是无法上传的，那么这是为什么了？其实这就是测试号的问题，所以我们需要自行注册一个小程序，当然，这就需要我们自备一个邮箱了，如图：

填写完毕后再去我们填入的邮箱处打开腾讯发给我们的邮件，里面有一个激活链接，此时点击就可以使用了，如图：

此时我们使用该AppID来创建一个小程序，当然，由于我使用了另一个微信号来注册这个小程序，因此还需重新扫码这个AppID才有用，意思就是用哪个微信号绑定的小程序AppID就用哪个号扫码了创建微信小程序，如图：

此时就有了上传按钮，我们点击它，就可以进行上传了，如图：

此时我们再去小程序的后台，可以发现版本管理中就多了个我们刚刚上传的开发版本的提交记录，如图：

此时我们点击提交审核后，会出现无法提交，这是因为小程序信息没有填写完整，所以我们需要填写，如图：

填写完毕后，然后再次上传我们的项目，这个时候就可以提交审核了，如图：

然后按照提示一步步操作就可以进行提交审核了，接下来就是慢慢等待审核工作是否完成了，这里我填写的小程序信息是"简易编程网"，感兴趣的小伙伴们可以试试，是否能搜索到该小程序。不过这里有一点需要注意的是，不能提交一个demo形式的项目，必须要是正式的。后续小编将会告诉大家如何才能通过审核。

五、总结本文和大家一起讲述了小程序的创建和小程序所对应的文件的作用，由于咱们后期的作品还有很多都涉及到线上使用，所以这里咱们以后都会选择使用正式注册的小程序，而非测试号；下篇文章小编将带大家一起来讲讲关于小程序项目的各项配置。

第二天-------小程序的配置一、前言上篇文章我们谈到了关于小程序的项目文件结构，了解到小程序的运行流程，其中小程序的项目各种配置是很重要的，他直接决定了项目的布局和功能，下面我们一起来看下小程序中的一些配置文件的使用方法吧。

二、项目配置文件文件名为project.config.json，这个文件被用来记录所有在开发者工具上所做的配置，这个文件中的配置一般不需要我们来手动修改，因此可以跳过。

三、全局配置文件可以将这些配置参数应用到所有的文件当中去，文件名为app.json，如图：

该文件一般来说可以配置页面上的很多选项，并且是通过设置常用的属性来进行功能的实现的。常用属性如下：

属性

类型

必填

描述

最低版本

entryPagePath

string

否

小程序默认启动首页

pages

string[]

是

页面路径列表

window

Object

否

全局的默认窗口表现

tabBar

Object

否

底部tab栏的表现

networkTimeout

Object

否

网络超时时间

debug

boolean

否

是否开启debug模式，默认关闭

functionalPages

boolean

否

是否启用插件功能页，默认关闭

2.1.0

subpackages

Object[]

否

分包结构配置

1.7.3

workers

string

否

Worker代码放置的目录

1.9.90

requiredBackgroundModes

string[]

否

需要在后台使用的能力，如「音乐播放」

plugins

Object

否

使用到的插件

1.9.6

preloadRule

Object

否

分包预下载规则

2.3.0

resizable

boolean

否

PC小程序是否支持用户任意改变窗口大小（包括最大化窗口）；iPad小程序是否支持屏幕旋转。默认关闭

2.3.0

usingComponents

Object

否

全局自定义组件配置

开发者工具1.02.1810190

permission

Object

否

小程序接口权限相关设置

微信客户端7.0.0

sitemapLocation

string

是

指明sitemap.json的位置

style

string

否

指定使用升级后的weui样式

2.8.0

useExtendedLib

Object

否

指定需要引用的扩展库

2.2.1

entranceDeclare

Object

否

微信消息用小程序打开

微信客户端7.0.9

darkmode

boolean

否

小程序支持DarkMode

2.11.0

themeLocation

string

否

指明theme.json的位置，darkmode为true为必填

开发者工具1.03.2004271

lazyCodeLoading

string

否

配置自定义组件代码按需注入

2.11.1

singlePage

Object

否

单页模式相关配置

2.12.0

supportedMaterials

Object

否

聊天素材小程序打开相关配置

2.14.3

serviceProviderTicket

string

否

定制化型服务商票据

embeddedAppIdList

string[]

否

内嵌小程序appId

这些属性同时又对应有很多选项，如下：

entryPagePath指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为pages列表的第一项。不支持带页面路径参数。

{"entryPagePath":"pages/index/index"}pages用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的.json，.js，.wxml，.wxss四个文件进行处理。

未指定entryPagePath时，数组的第一项代表小程序的初始页面（首页）。

小程序中新增/减少页面，都需要对pages数组进行修改。

如开发目录为：

├──app.js├──app.json├──app.wxss├──pages││──index││├──index.wxml││├──index.js││├──index.json││└──index.wxss│└──logs│├──logs.wxml│└──logs.js└──utils则需要在app.json中写

{"pages":["pages/index/index"，"pages/logs/logs"]}window用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性

类型

默认值

描述

最低版本

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色，如#000000

navigationBarTextStyle

string

white

导航栏标题颜色，仅支持black/white

navigationBarTitleText

string

导航栏标题文字内容

navigationStyle

string

default

导航栏样式，仅支持以下值：default默认样式custom自定义导航栏，只保留右上角胶囊按钮。参见注2。

iOS/Android微信客户端6.6.0，Windows微信客户端不支持

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

string

dark

下拉loading的样式，仅支持dark/light

backgroundColorTop

string

#ffffff

顶部窗口的背景色，仅iOS支持

微信客户端6.5.16

backgroundColorBottom

string

#ffffff

底部窗口的背景色，仅iOS支持

微信客户端6.5.16

enablePullDownRefresh

boolean

false

是否开启全局的下拉刷新。详见Page.onPullDownRefresh

onReachBottomDistance

number

50

页面上拉触底事件触发时距页面底部距离，单位为px。详见Page.onReachBottom

pageOrientation

string

portrait

屏幕旋转设置，支持auto/portrait/landscape详见响应显示区域变化

2.4.0(auto)/2.5.0(landscape)

restartStrategy

string

homePage

重新启动策略配置

2.8.0

initialRenderingCache

string

页面初始渲染缓存配置，支持static/dynamic

2.11.1

visualEffectInBackground

string

none

切入系统后台时，隐藏页面内容，保护用户隐私。支持hidden/none

2.15.0

注1：HexColor（十六进制颜色值），如"#ff00ff"注2：关于navigationStyleiOS/Android客户端7.0.0以下版本，navigationStyle只在app.json中生效。iOS/Android客户端6.7.2版本开始，navigationStyle:custom对web-view组件无效开启custom后，低版本客户端需要做好兼容。开发者工具基础库版本切到1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉Windows客户端3.0及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，navigationStyle:custom不再生效restartStrategy基础库2.8.0开始支持，低版本需做兼容处理。

重新启动策略配置

可选值

含义

homePage

（默认值）如果从这个页面退出小程序，下次将从首页冷启动

homePageAndLatestPage

如果从这个页面退出小程序，下次冷启动后立刻加载这个页面，页面的参数保持不变（不可用于tab页）

如：

{"window":{"navigationBarBackgroundColor":"#ffffff"，"navigationBarTextStyle":"black"，"navigationBarTitleText":"微信接口功能演示"，"backgroundColor":"#eeeeee"，"backgroundTextStyle":"light"}}

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

属性

类型

必填

默认值

描述

最低版本

color

HexColor

是

tab上的文字默认颜色，仅支持十六进制颜色

selectedColor

HexColor

是

tab上的文字选中时的颜色，仅支持十六进制颜色

backgroundColor

HexColor

是

tab的背景色，仅支持十六进制颜色

borderStyle

string

否

black

tabbar上边框的颜色，仅支持black/white

list

Array

是

tab的列表，详见list属性说明，最少2个、最多5个tab

position

string

否

bottom

tabBar的位置，仅支持bottom/top

custom

boolean

否

false

自定义tabBar，见详情

2.5.0

其中list接受一个数组，只能配置最少2个、最多5个tab。tab按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性

类型

必填

说明

pagePath

string

是

页面路径，必须在pages中先定义

text

string

是

tab上按钮文字

iconPath

string

否

图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。

selectedIconPath

string

否

选中时的图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片。当position为top时，不显示icon。

networkTimeout各类网络请求的超时时间，单位均为毫秒。

属性

类型

必填

默认值

说明

request

number

否

60000

wx.request的超时时间，单位：毫秒。

connectSocket

number

否

60000

wx.connectSocket的超时时间，单位：毫秒。

uploadFile

number

否

60000

wx.uploadFile的超时时间，单位：毫秒。

downloadFile

number

否

60000

wx.downloadFile的超时时间，单位：毫秒。

debug可以在开发者工具中开启debug模式，在开发者工具的控制台面板，调试信息以info的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

functionalPages基础库2.1.0开始支持，低版本需做兼容处理。

插件所有者小程序需要设置这一项来启用插件功能页。

subpackages微信客户端6.6.0，基础库1.7.3及以上版本支持

启用分包加载时，声明项目分包结构。

写成subPackages也支持。

workers基础库1.9.90开始支持，低版本需做兼容处理。

使用Worker处理多线程任务时，设置Worker代码放置的目录

requiredBackgroundModes微信客户端6.7.2及以上版本支持

申明需要后台运行的能力，类型为数组。目前支持以下项目：

audio:后台音乐播放location:后台定位如：

{"pages":["pages/index/index"]，"requiredBackgroundModes":["audio"，"location"]}注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。

plugins基础库1.9.6开始支持，低版本需做兼容处理。

声明小程序需要使用的插件。

preloadRule基础库2.3.0开始支持，低版本需做兼容处理。

声明分包预下载的规则。

resizable基础库2.3.0开始支持，低版本需做兼容处理。

在iPad上运行的小程序可以设置支持屏幕旋转。

在PC上运行的小程序，用户可以按照任意比例拖动窗口大小，也可以在小程序菜单中最大化窗口

usingComponents开发者工具1.02.1810190及以上版本支持

在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。

permission微信客户端7.0.0及以上版本支持

小程序接口权限相关设置。字段类型为Object，结构为：

属性

类型

必填

默认值

描述

scope.userLocation

PermissionObject

否

位置相关权限声明

PermissionObject结构

属性

类型

必填

默认值

说明

desc

string

是

小程序获取权限时展示的接口用途说明。最长30个字符

如：

{"pages":["pages/index/index"]，"permission":{"scope.userLocation":{"desc":"你的位置信息将用于小程序位置接口的效果展示"//高速公路行驶持续后台定位}}}

sitemapLocation指明sitemap.json的位置；默认为'sitemap.json'即在app.json同级目录下名字的sitemap.json文件

style基础库2.8.0开始支持，低版本需做兼容处理。

微信客户端7.0开始，UI界面进行了大改版。小程序也进行了基础组件的样式升级。app.json中配置"style":"v2"可表明启用新版的组件样式。

本次改动涉及的组件有buttoniconradiocheckboxswitchslider。可前往小程序示例进行体验。

useExtendedLib基础库2.2.1开始支持，低版本需做兼容处理。

最新的nightly版开发者工具开始支持，同时基础库从支持npm的版本（2.2.1）起支持

指定需要引用的扩展库。目前支持以下项目：

kbone:多端开发框架weui:WeUI组件库指定后，相当于引入了对应扩展库相关的最新版本的npm包，同时也不占用小程序的包体积。rc工具版本支持分包引用。用法如下：

{"useExtendedLib":{"kbone":true，"weui":true}}entranceDeclare微信客户端7.0.9及以上版本支持，iOS暂不支持

聊天位置消息用打车类小程序打开，详情参考。

"entranceDeclare":{"locationMessage":{"path":"pages/index/index"，"query":"foo=bar"}}darkmode开发者工具1.03.2004271及以上版本支持，基础库2.11.0及以上版本支持

微信iOS客户端7.0.12版本、Android客户端7.0.13版本正式支持DarkMode，可通过配置"darkmode":true表示当前小程序可适配DarkMode，所有基础组件均会根据系统主题展示不同的默认样式，navigationbar和tabbar也会根据开发者的配置自动切换。

配置后，请根据DarkMode适配指南自行完成基础样式以外的适配工作。

{"darkmode":true}themeLocation自定义theme.json的路径，当配置"darkmode":true时，当前配置文件为必填项。

{"themeLocation":"/path/to/theme.json"}lazyCodeLoading目前仅支持值requiredComponents，代表开启小程序「按需注入」特性。

{"lazyCodeLoading":"requiredComponents"}singlePage基础库2.11.3及以上版本支持，目前分享到朋友圈(Beta)后打开会进入单页模式

单页模式相关配置

属性

类型

必填

默认值

描述

navigationBarFit

String

否

默认自动调整，若原页面是自定义导航栏，则为float，否则为squeezed

导航栏与页面的相交状态，值为float时表示导航栏浮在页面上，与页面相交；值为squeezed时表示页面被导航栏挤压，与页面不相交

配置示例{"pages":["pages/index/index"，"pages/logs/index"]，"window":{"navigationBarTitleText":"Demo"}，"tabBar":{"list":[{"pagePath":"pages/index/index"，"text":"首页"}，{"pagePath":"pages/logs/logs"，"text":"日志"}]}，"networkTimeout":{"request":10000，"downloadFile":10000}，"debug":true，}embeddedAppIdList指定小程序可通过
wx.openEmbeddedMiniProgram打开的小程序名单。

{"embeddedAppIdList":["wxe5f52902cf4de896"]}

四、页面配置文件每个我们所创建的页面文件都会有这么一个文件，它的文件名是"文件夹名.json"，如图：

这就是单页面的配置文件，我们都知道一个项目是由一个个页面组合而成的，所以每个页面不能用同一个配置，因此我们可以给每个页面不同的配置，相当于是局部配置，所以只能作用于当前页面，常用的属性如下：

属性

类型

默认值

描述

最低版本

navigationBarBackgroundColor

HexColor

#000000

导航栏背景颜色，如#000000

navigationBarTextStyle

string

white

导航栏标题颜色，仅支持black/white

navigationBarTitleText

string

导航栏标题文字内容

navigationStyle

string

default

导航栏样式，仅支持以下值：default默认样式custom自定义导航栏，只保留右上角胶囊按钮。参见注1。

iOS/Android微信客户端7.0.0，Windows微信客户端不支持

backgroundColor

HexColor

#ffffff

窗口的背景色

backgroundTextStyle

string

dark

下拉loading的样式，仅支持dark/light

backgroundColorTop

string

#ffffff

顶部窗口的背景色，仅iOS支持

微信客户端6.5.16

backgroundColorBottom

string

#ffffff

底部窗口的背景色，仅iOS支持

微信客户端6.5.16

enablePullDownRefresh

boolean

false

是否开启当前页面下拉刷新。详见Page.onPullDownRefresh

onReachBottomDistance

number

50

页面上拉触底事件触发时距页面底部距离，单位为px。详见Page.onReachBottom

pageOrientation

string

portrait

屏幕旋转设置，支持auto/portrait/landscape详见响应显示区域变化

2.4.0(auto)/2.5.0(landscape)

disableScroll

boolean

false

设置为true则页面整体不能上下滚动。只在页面配置中有效，无法在app.json中设置

usingComponents

Object

否

页面自定义组件配置

1.6.3

initialRenderingCache

string

页面初始渲染缓存配置，支持static/dynamic

2.11.1

style

string

default

启用新版的组件样式

2.10.2

singlePage

Object

否

单页模式相关配置

2.12.0

restartStrategy

string

homePage

重新启动策略配置

2.8.0

页面配置中只能设置app.json中window对应的配置项，以决定本页面的窗口表现，所以无需写window这个属性。

注1：关于navigationStyleiOS/Android客户端7.0.0以下版本，navigationStyle只在app.json中生效。iOS/Android客户端6.7.2版本开始，navigationStyle:custom对web-view组件无效开启custom后，低版本客户端需要做好兼容。开发者工具基础库版本切到1.7.0（不代表最低版本，只供调试用）可方便切到旧视觉Windows客户端3.0及以上版本，为了给用户提供更符合桌面软件的使用体验，统一了小程序窗口的导航栏，navigationStyle:custom不再生效singlePage基础库2.11.3及以上版本支持，目前分享到朋友圈(Beta)后打开会进入单页模式

单页模式相关配置

属性

类型

必填

默认值

描述

navigationBarFit

String

否

默认自动调整，若原页面是自定义导航栏，则为float，否则为squeezed

导航栏与页面的相交状态，值为float时表示导航栏浮在页面上，与页面相交；值为squeezed时表示页面被导航栏挤压，与页面不相交

restartStrategy基础库2.8.0开始支持，低版本需做兼容处理。

重新启动策略配置，与app.json中一致。

配置示例{"navigationBarBackgroundColor":"#ffffff"，"navigationBarTextStyle":"black"，"navigationBarTitleText":"微信接口功能演示"，"backgroundColor":"#eeeeee"，"backgroundTextStyle":"light"}那么当我们要创建其它页面的时候该怎么办了，很简单，如图：

首先新建一个文件夹，比如register，然后新建page，还是register，这样就可以创建一个单页面所要用到的所有文件了，如图：

不过此时我们可以看到，我们是没有能访问该页面的条件的，现在我们给他修改一下，如图：

可以看到，此时显示的就是register页面的默认内容了，实现的方法就是把该页面的地址放在第一位，这样默认启动页面就是register页面了。

五、sitemap配置小程序根目录下的sitemap.json文件用于配置小程序及其页面是否允许被微信索引，文件内容为一个JSON对象，如果没有sitemap.json，则默认为所有页面都允许被索引；sitemap.json有以下属性：

配置项属性

类型

必填

描述

rules

Object[]

是

索引规则列表

rulesrules配置项指定了索引规则，每项规则为一个JSON对象，属性如下所示：

属性

类型

必填

默认值

取值

取值说明

action

string

否

"allow"

"allow"、"disallow"

命中该规则的页面是否能被索引

page

string

是

"*"、页面的路径

*表示所有页面，不能作为通配符使用

params

string[]

否

[]

当page字段指定的页面在被本规则匹配时可能使用的页面参数名称的列表（不含参数值）

matching

string

否

"inclusive"

参考matching取值说明

当page字段指定的页面在被本规则匹配时，此参数说明params匹配方式

priority

Number

否

优先级，值越大则规则越早被匹配，否则默认从上到下匹配

matching取值说明

值

说明

exact

当小程序页面的参数列表等于params时，规则命中

inclusive

当小程序页面的参数列表包含params时，规则命中

exclusive

当小程序页面的参数列表与params交集为空时，规则命中

partial

当小程序页面的参数列表与params交集不为空时，规则命中

配置示例{"rules":[{"action":"allow"，"page":"path/to/page"，"params":["a"，"b"]，"matching":"exact"}，{"action":"disallow"，"page":"path/to/page"}]}path/to/page?a=1b=2=>优先索引path/to/page=>不被索引path/to/page?a=1=>不被索引path/to/page?a=1b=2c=3=>不被索引其他页面都会被索引

{"rules":[{"action":"allow"，"page":"path/to/page"，"params":["a"，"b"]，"matching":"inclusive"}，{"action":"disallow"，"page":"path/to/page"}]}path/to/page?a=1b=2=>优先索引path/to/page?a=1b=2c=3=>优先索引path/to/page=>不被索引path/to/page?a=1=>不被索引其他页面都会被索引

{"rules":[{"action":"allow"，"page":"path/to/page"，"params":["a"，"b"]，"matching":"exclusive"}，{"action":"disallow"，"page":"path/to/page"}]}path/to/page=>优先索引path/to/page?c=3=>优先索引path/to/page?a=1=>不被索引path/to/page?a=1b=2=>不被索引其他页面都会被索引

{"rules":[{"action":"allow"，"page":"path/to/page"，"params":["a"，"b"]，"matching":"partial"}，{"action":"disallow"，"page":"path/to/page"}]}path/to/page?a=1=>优先索引path/to/page?a=1b=2=>优先索引path/to/page=>不被索引path/to/page?c=3=>不被索引其他页面都会被索引注：没有sitemap.json则默认所有页面都能被索引

注：{"action":"allow"，"page":"\*"}是优先级最低的默认规则，未显式指明"disallow"的都默认被索引

六、总结以上的内容大部分均来自于腾讯官方文档，感兴趣可以去看看，这里小编只是加了一些个人的拙见，不够上述内容我们肯定是需要了解并且应用到的。

第三天-------小程序的组件一、前言小程序中的组件其实相当于网页中的HTML标签，只不过标签名字不一样，接下来我们一起来看下微信小程序都给我们提供了哪些组件吧。

二、容器组件可以存放其它组件的容器组件，目前主要有如下几种：

cover-image覆盖在原生组件之上的图片视图cover-view覆盖在原生组件之上的文本视图match-media匹配检测节点movable-area的可移动区域movable-view可移动的视图容器，在页面中可以拖拽滑动page-container页面容器scroll-view可滚动视图区域share-element共享元素swiper滑块视图容器swiper-item仅可放置在swiper组件中，宽高自动设置为100%view视图容器这里小编来和大家说说常用的一些容器组件。

三、基础内容组件这里给我们提供了常见的几种图标还有进度条，如果你想用HTML中的标签请在富文本组件中使用，另外，小程序中的文本组件是text，如下：

icon图标progress进度条rich-text富文本text文本

四、表单组件button按钮checkbox多选项目checkbox-group多项选择器，内部由多个checkbox组成editor富文本编辑器，可以对图片、文字进行编辑form表单input输入框keyboard-accessory设置input/textarea聚焦时键盘上方cover-view/cover-image工具栏视图label用来改进表单组件的可用性picker从底部弹起的滚动选择器picker-view嵌入页面的滚动选择器picker-view-column滚动选择器子项radio单选项目radio-group单项选择器，内部由多个radio组成slider滑动选择器switch开关选择器textarea多行输入框

五、导航组件本项目内的页面跳转，不过不支持外部链接的跳转。

functional-page-navigator仅在插件中有效，用于跳转到插件功能页navigator页面链接

六、媒体组件audio音频camera系统相机image图片live-player实时音视频播放（v2.9.1起支持同层渲染）live-pusher实时音视频录制（v2.9.1起支持同层渲染）video视频（v2.4.0起支持同层渲染）voip-room多人音视频对话

七、地图map地图（v2.7.0起支持同层渲染，相关apiwx.createMapContext

八、画布canvas画布

九、开放组件web-view承载网页的容器adBanner广告ad-custom原生模板广告official-account公众号关注组件open-data用于展示微信开放的数据专门用来做广告或者获取小程序的用户的数据。

十、原生组件native-component小程序中的部分组件是由客户端创建的原生组件小程序的原生组件为：

cameracanvasinput（仅在focus时表现为原生组件）live-playerlive-pushermaptextareavideo原生组件的层级是最高的，所以页面中的其他组件无论设置z-index为多少，都无法盖在原生组件上。原生组件还无法在picker-view中使用。

原生组件的事件监听不能使用bind:eventname的写法，只支持bindeventname。原生组件也不支持catch和capture的事件绑定方式。原生组件会遮挡vConsole弹出的调试面板。为了解决原生组件层级最高的限制。小程序专门提供了cover-view和cover-image组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。

十一、无障碍访问aria-component满足视障人士对于小程序的访问需求

十二、导航栏navigation-bar页面导航条配置节点，用于指定导航栏的一些属性

十三、页面属性配置节点page-meta页面属性配置节点，用于指定页面的一些属性、监听页面事件

十四、可视化如果你觉得一个个写组件很麻烦，那么你可以使用可视化的方式来使用组件，如图：

这样可以帮助我们快速构建页面。

十五、ui组件虽然微信给我们提供了一些组件，但是这些组件并不是特别美观，于是乎，小编决定使用一些已经写好了三方的组件，这里推荐腾讯团队做的一个ui组件库-----WeUI。这里小编已经下载好了，给大家一个地址：
https://url18.ctfile.com/f/7715018-519360361-ee1b16（访问密码：6511），下载好了之后，我们将其放入到项目中去，然后添加到项目的全局样式文件，如图：

然后就可以使用了，如图：

虽然说weui的组件做的还不错，基本上不用我们自己写样式，但是文档写的不适合小白学习，所以这里小编给大家推荐一款新的小程序组件库，他就是iviewweapp，下载地址：
https://url18.ctfile.com/f/7715018-519360357-566602（访问密码：6511），由于iviewweapp和weui的样式文件不一样，因此我们只有一个个导入，需要什么导入什么，首先打开页面配置文件，如下：

然后使用自定义的组件名来使用这个组件，如下：

注：这里我们需要删除example和build，否则会报错。

十六、自定义组件在实际开发中，并不是所有的组件都能满足我们的需求，我们总有需要自己写组件的时候，微信小程序可以让我们轻松实现自定义组件，首先我们创建一个自定义的组件文件夹，然后分别写入页面，样式和脚本，如图：

然后我们将该组件导入到我们要应用到该组件的页面配置文件中去，如图：

然后引入该组件bb，如图：

十七、数据传递很多时候，咱们组件中的数据并不全是静态的，有的时候也要做成动态的响应式的组件，这个时候需要我们进行数据传递，首先我们需要在页面文件夹的js文件中去添加需要传递的数据的键值对，如图：

十八、条件渲染还是使用上面的d1数据，条件渲染是将我们所设置的条件进行对比，哪个组件的条件符合就显示哪个组件，如图：

十九、列表渲染主要是通过遍历的方式来输出一些数组字典对象，如下：

二十、模板使用模板增加了代码的复用性，想用哪个就用哪个，如图：

这里的模板中的data属性我们也可以直接在里面给他赋值，如图：

二十一、引入模板虽然我们可以自己制作模板，但是很多时候为了代码的简洁性，我们需要进行拆分代码，这个时候就可以使用引入的概念，在此之前，我们需要写一个模板文件，如图：

然后导入它，如图：

当然，除此之外还有一个更简单的导入方法，如图：

可以看到，template中的内容他是不会包含进去的，也就是说他只会引入除模板以外的组件和内容。

二十二、总结本文主要讲到了关于微信小程序中的组件的应用，其实也就是我们熟知的页面标签，通过他们我们可以在页面中嵌入一些元素，由于现在很多三方组件的崛起，建议大家尽量用三方框架去做。

注：文中组件的来历及解释部分参考微信开放文档

第四天-------小程序的样式一、前言前面我们讲到了小程序的组件，简直是花样多多，不过光有组件可不行，我们还得让组件更加的有魅力并且还能让组件处于不同的位置什么时候出现，这些都是需要我们通过样式来实现的。

二、全局样式顾名思义，可以在全局中使用，要想声明在全局都可以使用的样式，那就要求我们必须在app.wxss中声明一些样式，如图：

然后再在模板文件中引入该类名，如图：

可以看到，此时就已经将全局样式应用到该文本组件中了。

三、页面样式也就是我们经常提到的局部样式，它只作用于该文件夹中的模板文件，也就是该文件夹中的一个个组件中，如果用在其它地方的话，那是没有效果的。首先我们在该模板文件中写入样式，如图：

然后我们再在全局样式文件中写一个一模一样的类名，如图：

此时我们再来将该样式应用到文本组件中，如图：

可以看到，此时的全局样式就失效了，当有局部样式的时候一切以局部样式为主。

四、导入样式我们可以将样式写入一个文件，然后导入到局部样式文件中，如图：

接下来就可以使用了，如图：

五、内联样式还可以直接在组件中写样式，如下：

这里其实用到的就是我们之前在组件那篇文章中提到的数据绑定。

六、选择器既然有样式肯定要有选择器，选择器能够帮助我们精准定位一些组件并给他们赋予更多精美的样式，如下：

选择器

样例

样例描述

.class

.aa

选择所有拥有class="aa"的组件

#id

#aa

选择拥有id="aa"的组件

element

view

选择所有view组件

element，element

view，text

选择所有文档的view组件和所有的text组件

::after

view::after

在view组件后边插入内容

::before

view::before

在view组件前边插入内容

七、总结微信小程序中的样式使用方法也比较多，多写写就没什么问题，下篇文章我们将继续讲解关于微信小程序中的各种事件。

【WINDRISES MINIPROGRAM PROMOTION】尊享直接对接老板

电话+V： 159999-78052

专注于小程序推广配套流程服务方案。为企业及个人客户提供了高性价比的运营方案，解决小微企业和个体拓展客户的问题