小程序开发
小程序代码构成
● .json 后缀的 JSON 配置文件
● .wxml 后缀的 WXML 模板文件
● .wxss 后缀的 WXSS 样式文件
● .js 后缀的 JS 脚本逻辑文件
JSON 配置
JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。
我们可以看到在项目的根目录有一个 app.json 和 project.config.json,此外在 pages/logs 目录下还有一个 logs.json,我们依次来说明一下它们的用途。
小程序配置 app.json
app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、
超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下:
//比较常用的配置
{
"pages":[//项目模块
"pages/index/index",
"pages/logs/logs"
],
"window":{//窗口配置
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle":"black"
},
"tabBar": {//导航栏
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
"networkTimeout": {//各类网络请求的超时时间
"request": 10000,
"downloadFile": 10000
},
"debug": true//可以在开发者工具中开启 debug 模式
"entryPagePath": "pages/home/home"//指定小程序的默认启动路径(首页)
}
小程序页面的配置 index.json
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light",
"usingComponents":{}//自定义组件
}
小程序检索配置 sitemap.json
微信现已开放小程序内搜索,开发者可以通过 sitemap.json 配置,或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。
rules
rules 配置项指定了索引规则,每项规则为一个JSON对象,属性如下所示:
{
"rules":[{
"action": "allow",//命中该规则的页面是否能被索引
"page": "path/to/page",//* 表示所有页面,不能作为通配符使用
"params": ["a", "b"],//匹配时的参数名
"matching": "exact"//匹配方式 inclusive包含 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 => 不被索引
● 其他页面都会被索引
工具配置 project.config.json
{
"description": "项目配置文件",
"packOptions": {//用以配置项目在打包过程中的选项
"ignore": []//对符合指定规则的文件或文件夹进行忽略,以跳过打包的过程
},
"setting": {
"urlCheck": false,//是否检查安全域名和 TLS 版本
"es6": true,//是否启用 es6 转 es5
"enhance": true,//是否打开增强编译
"postcss": true,//上传代码时样式是否自动补全
"preloadBackgroundData": false,
"minified": true,//上传代码时是否自动压缩
"newFeature": false,
"coverView": true,//是否使用工具渲染 CoverView
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,//是否进行代码保护
"checkInvalidKey": true,
"checkSiteMap": true,//是否打开SiteMap索引提示
"uploadWithSourceMap": true,//上传时是否带上 sourcemap
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {//增强编译下Babel的配置项
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"showES6CompileOption": false
},
"compileType": "miniprogram",//当前为小程序类型
"libVersion": "2.19.1",//基础库版本
"appid": "wxf71802f7440001df",//项目的 appid
"projectname": "ej_app",//项目名字
"debugOptions": {//调试配置选项
"hidedInDevtools": []//调试器 Sources 面板隐藏源代码的文件
},
"scripts": {},//自定义预处理
"staticServerOptions": {
"baseURL": "",
"servePath": ""
},
"isGameTourist": false,
"condition": {
"search": {
"list": []
},
"conversation": {
"list": []
},
"game": {
"list": []
},
"plugin": {
"list": []
},
"gamePlugin": {
"list": []
},
"miniprogram": {
"list": []
}
}
}
JSON 语法
这里说一下小程序里JSON配置的一些注意事项。
JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
● 数字,包含浮点数和整数
● 字符串,需要包裹在双引号中
● Bool值,true 或者 false
● 数组,需要包裹在方括号中 []
● 对象,需要包裹在大括号中 {}
● Null
还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。
WXML 模板
从事过网页编程的人知道,网页编程采用的是 HTML + CSS + JS 这样的组合,其中 HTML 是用来描述当前这个页面的结构,CSS 用来描述页面的样子,JS 通常是用来处理这个页面和用户的交互。
同样道理,在小程序中也有同样的角色,其中 WXML 充当的就是类似 HTML 的角色。
在html中,我们利用DIV作为页面布局的容器,这里你可以使用标签
<view class="container">
<view class="header">
</view>
</view>
与HTML的不同
● 标签名字有点不一样
小程序的 WXML 用的标签是 view, button, text 等等,这些标签就是小程序给开发者包装好的基本能力,还提供了地图、视频、音频等等组件能力。
● 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
如果我们学过vue,那么就跟vue一样,这里我们可以使用模板语法;当然需要注意的是,你的模板js文件中需要有这个msg数据对象。
<text>{{msg}}</text>
WXSS样式
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。
● 新增了尺寸单位。在写 CSS 样式时,开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比,采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ,开发者可以免去换算的烦恼,只要交给小程序底层来换算即可,由于换算采用的浮点数运算,所以运算结果会和预期结果有一点点偏差。
● 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同,你可以写一个 app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
● 此外 WXSS 仅支持部分 CSS 选择器
样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
示例代码:
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。
<view class="normal_view" />
<view class="{{class_name}}" />
选择器
目前支持的选择器有:
● .class
● #id
● element
● element, element
● ::after
● ::before
JS 逻辑交互
一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。
<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>
点击 button 按钮的时候,我们希望把界面上 msg 显示成 “Hello World”,于是我们在 button 上声明一个属性: bindtap ,在 JS 文件里边声明了 clickMe 方法来响应这次点击操作:
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
WXS
WXS 代码可以编写在 wxml 文件中的 标签内,或以 .wxs 为后缀名的文件内。
模块
每一个 .wxs 文件和 标签都是一个单独的模块。
每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数,默认为私有的,对其他模块不可见。
一个模块要想对外暴露其内部的私有变量与函数,只能通过 module.exports 实现。
新建一个wxs文件:
module.exports={
a:1,
b:2
}
exports: 通过该属性,可以对外共享本模块的私有变量与函数。
WXML
<wxs src="./a.wxs" module="a"/>
<view>{{a.a}}</view>
require函数
在.wxs模块中引用其他 wxs 文件模块,可以使用 require 函数。
引用的时候,要注意如下几点:
● 只能引用 .wxs 文件模块,且必须使用相对路径。
● wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
● 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。
a.wxs
module.exports={
a:1,
b:2
}
b.wxs
var obj = require('./ac.wxs');
module.exports = obj;
WXML
<wxs src="./b.wxs" module="a"/>
<view>{{a.a}}</view>
module 属性
module 属性是当前 标签的模块名。在单个 wxml 文件内,建议其值唯一。有重复模块名则按照先后顺序覆盖(后者覆盖前者)。不同文件之间的 wxs 模块名不会相互覆盖。
module 属性值的命名必须符合下面两个规则:
● 首字符必须是:字母(a-zA-Z),下划线()
● 剩余字符可以是:字母(a-zA-Z),下划线(), 数字(0-9)
src 属性
src 属性可以用来引用其他的 wxs 文件模块。
引用的时候,要注意如下几点:
● 只能引用 .wxs 文件模块,且必须使用相对路径。
● wxs 模块均为单例,wxs 模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个 wxs 模块对象。
● 如果一个 wxs 模块在定义之后,一直没有被引用,则该模块不会被解析与运行。