好用的小程序代码分享

好用的小程序代码分享
一，小程序代码构成

page:页面构成

utils:工具类

json : JSON 配置文件

wxml: 模板文件

wxss : 样式文件

js :逻辑文件

二，JSON 配置

项目的根目录有一个 app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{

“pages”:[

“pages/index/index”,

“pages/logs/logs”

],

“window”:{

“backgroundTextStyle”:“light”,

“navigationBarBackgroundColor”: “#fff”,

“navigationBarTitleText”: “WeChat”,

“navigationBarTextStyle”:“black”

}

}

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 ——小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

三，wxml: 模板文件

WXML 充当的就是类似 HTML 的角色。

打开 pages/index/index.wxml，你会看到以下的内容:

获取头像昵称

{{userInfo.nickName}}

{{motto}}

四，wxss : 样式文件

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位 rpx，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。

提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。 此外 WXSS 仅支持部分 CSS选择器