第一天-------运行第一个小程序

一、前言

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

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

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

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

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

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

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

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

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

选择安装位置，如图：

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

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

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

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

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

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

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

三、项目文件结构

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

pagesindexindex.js页面jsindex.json页面配置index.wxml页面结构index.wxss页面样式logslog.js日志jslog.json日志配置log.wxml日志结构log.wxss日志样式utilutil.js 公用js.eslintrc.js   eslint配置，检查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

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 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

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

• 注 1：HexColor（十六进制颜色值），如"#ff00ff"

• 注 2：关于navigationStyle

• iOS/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 开始支持，低版本需做兼容处理。

重新启动策略配置

如：

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

tabBar

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

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

networkTimeout

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

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，结构为：

PermissionObject 结构

如：

{ "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"可表明启用新版的组件样式。

本次改动涉及的组件有 button icon radio checkbox switch slider。可前往小程序示例进行体验。

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，所有基础组件均会根据系统主题展示不同的默认样式，navigation bar 和 tab bar 也会根据开发者的配置自动切换。

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

{ "darkmode": true}

themeLocation

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

{ "themeLocation": "/path/to/theme.json"}

lazyCodeLoading

目前仅支持值 requiredComponents，代表开启小程序「按需注入」特性。

{ "lazyCodeLoading": "requiredComponents"}

singlePage

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

单页模式相关配置

配置示例

{ "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"，如图：

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

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

• 注 1：关于navigationStyle

• iOS/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) 后打开会进入单页模式

单页模式相关配置

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

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

matching 取值说明

配置示例

{ "rules":[{   "action": "allow",   "page": "path/to/page",   "params": ["a", "b"],   "matching": "exact"}, {   "action": "disallow",   "page": "path/to/page"}]
}

• path/to/page?a=1&b=2 => 优先索引

• path/to/page => 不被索引

• path/to/page?a=1 => 不被索引

• path/to/page?a=1&b=2&c=3 => 不被索引

• 其他页面都会被索引

{ "rules":[{   "action": "allow",   "page": "path/to/page",   "params": ["a", "b"],   "matching": "inclusive"}, {   "action": "disallow",   "page": "path/to/page"}]
}

• path/to/page?a=1&b=2 => 优先索引

• path/to/page?a=1&b=2&c=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=1&b=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=1&b=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 起支持同层渲染，相关api wx.createMapContext

八、画布

canvas   画布

九、开放组件

web-view承载网页的容器
adBanner 广告
ad-custom原生模板 广告
official-account公众号关注组件open-data用于展示微信开放的数据

专门用来做广告或者获取小程序的用户的数据。

十、原生组件

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

小程序的原生组件为：

• camera

• canvas

• input（仅在focus时表现为原生组件）

• live-player

• live-pusher

• map

• textarea

• video

原生组件的层级是最高的，所以页面中的其他组件无论设置 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的组件做的还不错，基本上不用我们自己写样式，但是文档写的不适合小白学习，所以这里小编给大家推荐一款新的小程序组件库，他就是iview weapp，下载地址：

https://url18.ctfile.com/f/7715018-519360357-566602（访问密码：6511），由于iview weapp和weui的样式文件不一样，因此我们只有一个个导入，需要什么导入什么，首先打开页面配置文件，如下：

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

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

十六、自定义组件

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

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

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

十七、数据传递

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

十八、条件渲染

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

十九、列表渲染

主要是通过遍历的方式来输出一些数组字典对象，如下：

二十、模板

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

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

二十一、引入模板

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

然后导入它，如图：

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

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

二十二、总结

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

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

第四天-------小程序的样式

一、前言

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

二、全局样式

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

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

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

三、页面样式

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

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

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

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

四、导入样式

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

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

五、内联样式

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

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

六、选择器

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

七、总结

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