新建项目
代码构成
- .json: 配置文件(json文件中不能添加注释,本博客中代码片段的注释皆为方便大家理解而添加);
- .wxml: 模板文件。相当于html,描述页面结构;
- .wxss: 样式文件。相当于css;
- .js: 脚本逻辑文件。写页面和用户的交互逻辑。
json配置文件
- project.config.json: 项目配置;
- app.json: 全局配置;
- page.json: 页面配置。
配置tabBar
要求:
- 两个tab页,分别为“基础”和“云开发”;
- 点击前后图标及字体不同;
- 为每个tab页设置自己的样式和显示的内容.
步骤:
- 因为两个tab页只需要两个页面,所以将pages文件夹下的所有文件及app.json里pages数组里配置的路径全部删除,只在pages里配置我们将要用到的两个页面即可。此处将两个页面命名为base和cloud。代码如下:
/*app.json*/
"pages": [
"pages/base/base",
"pages/cloud/cloud"
],
配置完成后保存此文件,将自动在pages文件夹下生成base及cloud页面及对应的文件。
2. 配置tabBar,代码如下:
/*app.json*/
"tabBar": {
"color": "#ccc0", //tab字体选中前颜色
"selectedColor": "#f00", //tab字体选后前颜色
"list": [{ //tab的列表
"pagePath": "pages/base/base",
"text": "基础",
"iconPath": "images/calendar.png", //点击前显示的图标
"selectedIconPath": "images/notebook.png" //选中后的图标
},
{
"pagePath": "pages/base/base",
"text": "云开发",
"iconPath": "images/calendar.png",
"selectedIconPath": "images/notebook.png"
}]
}
- 设置tab页的样式及内容。以cloud页面的样式为例,打开cloud.json,进行此页面导航栏背景色、字体内容及字体颜色的配置。
还有很多配置项,可阅读微信开放文档,自行尝试。
wxml结构文件
类似于html,但html里的一些标签wxml用不了,wxml有一些自己定义的组件。下面介绍常用的view及image组件。
我们所使用的小程序中的数据,大都是动态从服务端获取,然后再渲染输出到视图中显示。在wxml中显示的数据与其js文件中page的data一一对应,在wxml文件中用双大括号将变量名包起来即可获取。
下面显示字符串、图片、遍历数组的代码:
/*base.wxml*/
<view>{{msg}}</view> //显示字符串
<image src='{{img}}'></image> //显示图片
<view wx:for="{{arr}}">{{index}} {{item}}</view> //遍历数组
<view wx:for="{{list}}">{{index}} {{item.name}} {{item.age}}</view> //遍历数组,显示对象的每个属性
// pages/base/base.js
Page({
/**
* 页面的初始数据
*/
data: {
msg: 'Hello World', //字符串
img: '/images/notebook.png',//图片
arr: ['a','b','c'],//数组
list: [{
name: 'Cocoa',
age: 22
},
{
name: 'Keke',
age: 20
}
]
},
运行图:
wxss文件
rpx
相当于css,用来描述样式。与css不同的是,这里的尺寸单位为rpx,可以根据屏幕宽度进行自适应。开发微信小程序时常用 iPhone6 作为视觉稿的标准,因为此时px与rpx的换算为1rpx = 0.5px,比较好换算。
样式导入
使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。
比如在style下建一个公用样式文件common.wxss,在base.cxss中引用,代码如下
/* pages/base/base.wxss */
@import '../../style/common.wxss';
第三方样式库
微信小程序还为开发者提供了现成的样式库,比如WeUI,iView Weapp,Vant Weapp。
js页面交互
用来写交互逻辑。多阅读官网文档即可。
开通云服务
创建环境
每个小程序可免费创建两个环境,两个环境分别有各自独立的资源。我将环境分为“开发环境”和“生产环境”,在开发环境中进行开发测试,将所有功能测试完毕后,再上传到生产环境。
使用云开发时,要注意调试基础库的版本在2.2.3以上。调试基础库的信息可在“详情”中找到,如下图:
云数据库
云开发提供了一个json数据库,与传统的关系型数据库不同,此为文档型数据库。两数据库的对应关系如下表:
关系型数据库 | 文档型数据库 |
---|---|
数据库database | 数据库database |
表table | 集合collection |
行row | 记录record/doc |
列column | 字段field |
适用于表之间有复杂关联关系 | 适用于有大量读写操作 |
数据类型
- String: 字符串
- Number: 数字
- Object: 对象
- Array: 数组
- Bool: 布尔值
- GeoPoint: 地理位置点
- Date: 时间(客户端时间,而不是服务器时间)
- Null: 占位符,表示值存在但为空
操作云数据库
- 小程序控制(读写数据库收权限控制限制)
- 云函数控制(拥有读写数据库权限)
- 控制台控制(拥有读写数据库权限)
下一篇写一个云数据库增删改查demo,容我缓缓