微信小程序项目总结《二》配置、首页面开发

第三章：配置

根据项目需求和教程，小程序配置文件的代码为：

app.json

App.json 里面有几个配置项：

Pages：这个是编写的 js 文件，后缀 .js 这里不需要使用，配置好正确路径即可正常应用到（应用不到在重启微信开发者工具会直接报 page 错误）。

Window：配置顶部的一些样式，文档介绍比较详细。

tabBar：底部的几项配置，见名知意。

iconPath 和 selectedIconPath：底部菜单按钮图片与得到切换点击高亮。

app.wxss（配置全局wxss样式）

微信小程序首页静态页面开发" style="margin: 0.8em 0px; padding: 0px; box-sizing: border-box; font-weight: 100; color: rgb(85, 85, 85); font-family: 'microsoft yahei'; line-height: 35px; background-color: rgb(255, 255, 255);">第四章：微信小程序首页（静态页面）开发

welcome.wxml

1.视图容器view

这里用视图容器view块级元素将每个元素包裹起来，以便方便wxss的样式添加和js交互实现。常用的样式的属性：

display ：显示的模式。可选项有：flex（代表view可以伸缩，弹性布局）

flex-direction ：view容器主轴布局方向。可选项有：row ， column

justify-content ：view容器子元素沿着主轴的排列方式。可选项有：flex-start、center、flex-end、space-around

align-items ：view容器子子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式。可选项有：flex-start、center、flex-end

flex :权重。可选项：1，2, 3, 4, 5…(flex与display属性一般结合使用，单独使用flex无效)

2.{{ }}数据绑定机制。上述部分有两点需要说明:

（1）: 视图层嵌入的是{{motto}}而不是{{data.motto}}，微信框架默认设定视图层绑定的变量定义在Page对象的data属性中，也就是说，如果变量需要绑定到视图层，一定要定义data属性中

（2）: 通过调用Page对象的setData(Page对象预定义)方法，可以更新界面数据，但是直接设置变量是无效的，因此对于绑定到视图层的变量，要永远使用setData方法来设置变量值

welcome.wxss（接下来的页面不会上wxss代码，完成这些主要是前期对效果图的精准制作和分析）

微信小程序尺寸单位rpx以及样式

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。

如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0。

rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)

iPhone5 1rpx = 0.42px 1px = 2.34px

iPhone6 1rpx = 0.5px 1px = 2rpx

iPhone6s 1rpx = 0.552px 1px = 1.81rpx

微信小程序也支持rem尺寸单位，rem和rpx的换算关系：rem: 规定屏幕宽度为20rem；1rem = (750/20)rpx

注：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

welcome.js

1.wx.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（搭配onTap组件使用，点击后跳转页面）

2.app.js中包含一个App()函数，我把它理解为微信小程序真正意义上的入口，也就是说当启动一个小程序的时候，首先会执行到这里。App()函数用来注册一个小程序，参数为Object类型，可以在其中指定小程序的生命周期函数（理解还不是很透彻）, 当然，也可以定义一个全局的数据和函数，我们可以在页面中调用全局的getApp()方法，获得小程序实例，从而来调用我们定义的全局数据和函数。