宁皓网 微信小程序：框架

学习微信小程序框架。
来自 https://ninghao.net/course/5054#info

 我做的例子是在百度网盘里  

好像是  ninghao-weixin-master.zip

现在模拟器上显示的是一个空白的微信小程序，在控制台上会显示一个错误 .. 说没找到入口文件 app.json .. 我们可以先在项目的根目录下面，先给小程序添加一个主要的逻辑文件 .. 文件的名字应该是 app.js ... 在它里面用一下 App 去注册一个小程序 .. 先给它提供一个空白的对象 .. 一会我们会往里面放点东西 ..

再去给小程序创建一个主要的配置文件 .. 文件的名字应该是 app.json .. 一组花括号 ...

现在控制台上提示，在 app.json 里面没定义 pages ... 就是小程序里的页面 .. 在 app.json 里面，添加一个 pages .. 它里面的东西就是小程序里的页面 ... 比如先添加一个 pages/index/index .. 它表示的是页面的路径.. 也就是个 index 页面应该是在 pages 目录下面的 index 这个目录里面 .. 文件的名字是 index .. 这里不需要添加文件的扩展名 .. 小程序框架会自动去加载需要的文件 ..

每个页面都有它的主文件，配置文件，视图，还有样式文件 ..

下面我们再去添加这个页面 .. 创建一个文件 .. 要把它放在 pages/index 的下面，名字是 index.js .. 每个页面都需要一个 js 文件，它里面可以存储页面上需要的主要的逻辑代码 ..

注册一个页面，用一下 Page ... 给它一个空白的对象 .. 页面的界面需要一个 wxml 文件 .. 在 index 下面，创建一个 index.wxml ..

这里的东西跟 html 很像 .. 这里可以使用小程序提供的一些组件 .. 这些组件就像是 html 里的元素，或者叫标签 ..

这里用一个 view 组件，包装一下 text 组件 .. 在这个 text 组件里可以放点文字 .. 比如 hello ~

view 组件就像是 html 里的 div 元素 .. 是一个包装元素 ..

现在我们的小程序的首页上，会显示一个 hello ~ ，显示的内容是小程序里的 index 页面里提供的 ..

来自 https://ninghao.net/video/5058#info

3) 小程序的样式：wxss
 

小程序里面用的样式叫 wxss， wx 表示微信，ss 是 style sheets .. 它跟我们平时用的 css 差不多 .. 你可以把它理解成微信小程序定制版的 css ...

在小程序的有个主要的样式文件，每个页面也可以有属于自己的样式文件 .. 打开 index 页面的 wxml 文件 .. 在这个 view 组件上面，可以用一个 class ，在组件上面添加一个类 .. 名字是 container .. 这个 container 类的样式在其它页面上也应该会用到 .. 所以我们可以把它的样式定义到小程序的主样式文件里 ..

在小程序的根目录下面，创建一个样式文件 .. 名字是 app.wxss .. 小程序的主样式文件必须是这个名字 .. 添加一个 .container .. 作为样式的选择器 ..

先把组件的 box-sizing 的值设置成 border-box .. 再设置一下它的 height ，也就是高度 .. 值可以是 100vh ..

再用一个 padding ，添加一点边距 .. 值是 8px .. 然后用一个 background 属性，设置一下页面的背景 .. #f8f8f8 ...

再设置一下文字的样式，用一个 color 属性，值可以使用 rgba 来表示 .. 颜色是黑色 .. 不透明度设置成 0.85 ...

现在我想让页面上的内容水平还有垂直都居中 .. 我们可以使用 css 的 flexbox 去实现 .. 先改造一下页面的 wxml .. 在这个 view 组件上面，再添加两个类 .. vertical centered .. 然后在它里面再嵌套一个 view 组件 ..

回到小程序的主样式文件 ... 先定义一下 .centered 这个类的样式 .. 如果组件上带这个样式，我们就让它水平居中 .. 把组件的 display 的值设置成 flex ，让它变成一个 flexbox ..

flex-direction 的值设置成 column ... 然后再设置一下它里面的元素的对齐 ... 用的是 align-items ... 设置成 center ..

你会看到，现在页面上的这个元素会水平居中显示 ..

再添加一个样式选择器 .. 同时带 .vertical 还有 .centered 类的组件 .. 设置一下它的 view 这个子元素的样式 ..

把这个组件也设置城 flexbox ... display: flex ... 然后把 height 的值设置成 100vh .. 再把 flex-direction 设置成 row .. 最后再用 align-items .. 让组件居中对齐 ...

现在页面上的这个组件会水平居中，同时也会垂直居中 ..

小程序页面上共用的样式，你都可以把它放在这个 app.wxss 文件里面 .. 这样你就可以在小程序的所有的页面上使用在这个文件里定义的样式 ..

页面样式

每个页面也可以有自己单独的样式 .. 比如我们给这个 index 页面创建一个样式文件 .. 文件的名字应该就是页面的名字 .. 这里就是 index，后缀是 wxss ..

在打开页面的 wxml 文件 .. 在这个 text 组件上面，添加一个类 .. 名字是 header ... 我们把这个 header 的样式放在页面的样式文件里 ... 一个 .header ... 用一个 font-size 设置一下字号 ... 再用一个 font-family 设置一下字体 ..

来自 https://ninghao.net/video/5059#info


4) 小程序的窗口配置：window
 

小程序的相关配置都在 app.json 这个文件里面 .. 之前我们在这里用了一个 pages ，给小程序添加了一个页面 .. 就是这个 index ...

小程序窗口相关的配置可以放在 window 里面 .. 添加一个 window .. 然后可以使用不同的配置选项去配置小程序的窗口 .. 具体可以使用的配置选项你可以参考小程序的开发文档 ..

先用一个 navigationBarBackgroundColor .. 它可以设置导航栏的背景颜色 .. 默认是黑色 .. 这里我们把它设置成白色 ..

再用一个 navigationBarTitleText .. 设置一下导航栏上要显示的文字 .. ninghao.net .. 默认文字的颜色是白色，所以我们看不到文字 ..

设置导航栏的文字颜色用的是 navigationBarTextStyle .. 它可以是 white 白色，也可以是 black .. 黑色 ..

下面再用一个 enablePullDownRefresh .. 下拉刷新 .. 默认它的值是 false .. 不使用下拉刷新 .. 现在我们把它设置成 true ..

到模拟器上试一下 .. 向下拉动页面，会露出一个加载图标 .. 不过因为颜色是亮色，我们的背景也是亮色，所以没看到这个加载图标 ..

添加一个 backgroundTextStyle ，设置一下窗口背景文字的样式 .. 可以是 light ，也可以是 dark .. 这里我们设置成 dark .. 因为窗口背景颜色是亮色的 ..

可以再添加一个 backgroundColor 设置一下窗口背景的颜色 .. #ededed ..

再到模拟器上试一下 .. 向下拉动页面 .. 会露出一块 .. 这块区域的背景就是 backgroundColor 设置的 ..

这个下拉刷新的行为我们会在后面介绍到 ..

来自 https://ninghao.net/video/5060#info

5) 小程序的标签配置：tabBar - 准备
 

你可以为小程序添加一个标签栏 .. 上面会显示一些标签，点击不同的标签可以打开不同的页面 .. 在添加这个标签栏之前我们先去下载几个小图标，一会儿会在标签栏上用到 ..

http://github.com/ninghao/ninghao-icons

打开一个 github 仓库 .. ninghao-icons ... 选择下载 zip 格式的压缩包 ...

解压一下 ... 把 weixin .. app 下面的小图标 .. 放到我们的小程序项目里面 .. 可以先新建一个目录 .. 名字是 assets ... 再创建一个 icons ..

然后把下载的 app 小图标放到这个目录的下面 ...

标签栏上的每个项目都会对应一个页面 ... 最少要有两个项目，最多可以放五个项目 .. 先去新建一个页面 .. 直接复制一下 pages 下面的 index 目录 ..

名字是 event .. 再修改一下里面的文件名 ... 都把它们改成 event ...

打开这个 event.wxml ... 修改一下页面上显示的这个文字 ... 设置成 events !

来自 https://ninghao.net/video/5061#info

6) 小程序的标签配置：tabBar
 

小程序的标签栏要在小程序的主配置文件 app.json 里面配置一下 .. 添加一个 tabBar ... 给它一个对象 .. 里面可以使用一些配置选项 .. 具体的选项可以参数小程序的开发文档 ..

标签栏上的项目可以放在一个 list 里面 .. 它是一个数组 ... 每个项目又是一个对象 .. 先用 text 这个属性，可以设置一下标签项目上显示的文字 ..

先给首页添加一个标签项目 ... 标签上的文字是 首页 .. 点一下标签打开的页面可以使用 pagePath 这个属性配置一下 .. 首页的路径是 pages/index/index ..

复制一份，再添加一个标签项目 .. 这个项目是 活动 ... 页面的路径是 pages/event/event

演示

你会发现，在小程序的底部现在会显示一个标签栏 .. 上面有两个项目 .. 首页，还有 活动 .. 点一下活动 .. 打开的就是用 pagePath 指定的页面 ..

不过这里在控制台上提示一个错误 .. 说 event 页面在 app.json 里面没找到 .. 回到 app.json .. 打开 pages ... 这里我们再添加一个页面 .. 路径是 pages/event/event ..

然后再回到模拟器上试一下 ... 打开 活动 ... 页面上会显示一个 events ! 这个页面上显示的内容就是 event 页面提供的 ..

图标

标签项目上除了文字还可以添加一个小图标 .. 可以使用 jpg 或者 png 格式的图像文件 .. 在一个项目里用一下 iconPath .. 这个属性的值就是标签项目上用的小图标的位置 ..

之前我们已经下载了一些小图标，把它们放在了 assets .. icons 这个目录里了 .. 这里有个 home.png ，可以让它作为首页标签项目上显示的小图标 ..

另外我们还可以单独设置一下当前激活状态下的小图标 .. 添加一个 selectedIconPath .. 对应的值也是一个图标的位置 .. 这里我们用一下 home-active.png ..

同样的方法再处理一下活动这个标签项目 .. 图标是 event.png ... 激活状态的图标是 event-active.png ..

演示

再到模拟器上看一下 .. 现在标签栏上的项目会显示一个小图标 .. 切换一下标签 .. 正常状态还有激活状态，标签项目会使用我们指定的不同的小图标 ..

样式

现在我们再去配置一下这个标签栏的样式 .. 先用一个 color .. 它设置的是标签栏上的文字的颜色 .. 可以用一下 rgba 来表示的颜色 .. 颜色是黑色 .. 不透明度是 0.6 ..

再添加一个 selectedColor .. 它可以设置激活状态下的标签项目上的文字的颜色 .. 可以使用纯黑色 ..

borderStyle 可以设置标签栏上的边框的样式 .. 只能是 black 或者 white .. 这里我们把它设置成 white

然后用一个 backgroundColor ... 设置一下标签栏的背景颜色 .. #ededed ...

再到模拟器上预览一下我们配置好的这个标签栏 ...

来自 https://ninghao.net/video/5062#info

App
7) App：小程序的生命周期函数

一开始我们在小程序的 app.js 里面，使用这个 App 方法注册了一个小程序 .. 注册的时候给了它一个空白的对象 .. 在这个对象里，可以添加一些东西 .. 比如小程序的生命周期函数 ..

这些函数就是在小程序的不同阶段自动被调用的函数 ... 在这个给 App 的对象里面，我们可以用一下这些生命周期函数 ..

先添加一个 onLaunch ，它会在小程序初始化以后被执行，这里用一个 console.log 在控制台上输出一个 初始化 .. 再添加一个 onShow ，这个函数会在小程序启动以后，或者小程序从后台进入到前台的时候被执行 ... 输出一个 显示 ..

还有 onHide ... 它会在从前台进入到后台的时候执行，进入后台以后，我们在控制台上输出一个 隐藏 .. 还有一个 onError ，在小程序出现错误的时候会执行这个函数 .. 给它一个错误信息作为它的参数 .. 然后在控制台上输出这个错误信息 ..

回到开发者工具 ... 现在小程序已经初始化并且进入到了前台 .. 所以会执行 onLaunch 还有 onShow ... 在控制台上会输出一个 初始化，还有显示 ..

我们可以让这个小程序进入到后台 .. 点一下开发者工具边栏上的这个 后台 .. 这样会模拟小程序进入后台的情景 .. 进入后台以后，会执行 onHide .. 我们做的事就是在控制台上输出一个 隐藏 ...

这里会出现一些场景 .. 先随便选择一种场景 ... 小程序又重新进入前台运行 .. 这样又会执行 onShow ... 在控制台上会输出一个 显示 ..

参数

这个 onLaunch 还有 onShow 都支持一个 options 参数 .. 这个 options 里面会带一些有用的信息，你可能会在 onLaunch 或者 onShow 里面用到 ..

在 onLaunch 方法里面，先添加一个 options .. 然后在控制台上再输出这个 options ...

再给 onShow 也添加一个 options .. 同样在控制台上输出 options 里的东西 ..

再回到开发者工具 .. 在初始化这几个字的下面，输出的就是 onLaunch 里的 options 参数 .. 它是一个对象 .. 里面有一些属性 .. path 表示的是小程序的路径 .. scene 这个属性的值表示不同的场景 ..

显示，这两个字下面的东西是 onShow 函数里的 options 参数的值 .. path 现在显示的是首页 .. scene 的值是 1001 ..

我们再打开 活动 这个标签 .. 然后让小程序进入到后台 .. 这里会出现一个场景列表 .. 它表示的进入小程序前台的不同的方式 ..

比如 1001 这个场景值表示的就是 发现栏小程序主入口 .. 这里我们选择下面这个 1005 ..

再看一下 onShow 的 options 参数 .. 现在 path 的值是活动页面的路径 .. scene 的值是 1005 ... 之前它的值是 1001 .. 我们可以在生命周期函数里根据这些选项的值去做不同的事情 ..

来自 https://ninghao.net/video/5064#info

8) 打开小程序的调试功能
 

小程序有个调试功能，打开以后会在控制台上输出一些帮助信息 .. 告诉你小程序都做了什么 ... 打开这个调试功能，可以修改一下小程序的主配置文件 ... app.json ..

这里可以添加一个 debug ... 表示调试，把它的值设置成 true ... 意思就是打开小程序的调试功能 ..

回到开发者工具 .. 在调试这里，打开 Console ... 控制台 .. 在控制台上会显示小程序都做了什么 .. 一开始说 App 的 onLaunch have been invoked ，执行了应用的 onLaunch ..

然后又执行了 App 的 onShow ..

Register Page ，注册了 index 还有 event 这两个页面 ..

On app route ，表示我们现在在哪个地址 .. update view with init data ，使用初始化数据更新视图 ..

然后当前页面的 onLoad have been invoked ，执行了页面的 onLoad .. 接着又执行了页面的 onShow .. 这时候页面已经显示了 .. 页面上现在发生了一个 onReady 事件 .. 然后执行了页面的 onReady 函数 .. onLoad，onShow，onReady 这些都是页面的生命周期函数 ..

打开 活动 标签 .. 控制台上又会出现一些调试信息 .. on app route ，现在我们是在 event 这个页面 .. 执行了 index 页面的 onHide .. 因为之前的 index 页面被隐藏了 ..

然后又初始化数据更新视图 .. 执行页面的 onLoad 还有 onShow .. 页面上发生 onReady 事件，又执行了 onReady 函数 ..

来自 https://ninghao.net/video/5065#info

9) 小程序的全局数据与页面初始化数据
 

在应用里面可以添加点全局数据 .. 这些数据可能来自你的应用后台，或者是一些外部服务 .. 你可以在小程序的生命周期方法里面，去得到这些数据，再让它们作为全局数据 ..

在注册小程序的时候，给它添加一个 globalData ，表示全局数据 .. 里面随便添加点东西 .. 比如 greeting .. 对应的值是 hello ~

在页面上我们可以得到小程序实例，这样就可以访问小程序的全局数据了 .. 比如打开 index 页面 .. 添加一个 app .. 它的值可以用一下 getApp 这个函数 .. 这个函数会返回小程序实例 ..

注册页面用的是 Page .. 在给它的对象参数里面，可以添加一个 data 属性 .. 它里面的东西就是页面的初始数据 .. 添加一个 greeting ... 对应的值就是小程序里的 globalData 里的 greeting ..

现在我们可以在页面的视图文件里用一下页面上的这个 greeting 数据 .. 去掉这个静态的 hello ~ .. 两组大括号 .. 绑定一个数据 .. 里面输出的是页面上的 greeting .. 保存一下 ..

你会看到，首页上仍然会显示一个 hello ~ ，这个 hello 是页面的初始数据里的 greeting 属性的值，这个属性的值其实是小程序的全局数据里的 greeting 的值 ..

来自 https://ninghao.net/video/5066#info