官方资源链接

  • 指南
  • 框架
  • 组件
  • API
  • 云开发

progect.config.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// progect.config.json
// 正式JSON文件中不允许出现注释内容

{
"miniprogramRoot": "miniprogram/", // 小程序源码根目录
"cloudfunctionRoot": "cloudfunctions/", // 云函数目录
"setting": { // 设置项
"urlCheck": true,
"es6": true,
"enhance": true,
"postcss": true,
"preloadBackgroundData": false,
"minified": true,
"newFeature": true,
"coverView": true,
"nodeModules": false,
"autoAudits": false,
"showShadowRootInWxmlPanel": true,
"scopeDataCheck": false,
"uglifyFileName": false,
"checkInvalidKey": true,
"checkSiteMap": true,
"uploadWithSourceMap": true,
"compileHotReLoad": false,
"lazyloadPlaceholderEnable": false,
"useMultiFrameRuntime": true,
"useApiHook": true,
"useApiHostProcess": true,
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
},
"enableEngineNative": false,
"useIsolateContext": true,
"userConfirmedBundleSwitch": false,
"packNpmManually": false,
"packNpmRelationList": [],
"minifyWXSS": true,
"disableUseStrict": false,
"showES6CompileOption": false,
"useCompilerPlugins": false,
"minifyWXML": true,
"condition": true
},
"appid": "小程序appid",
"projectname": "项目名称",
"libVersion": "2.14.1",
"cloudfunctionTemplateRoot": "cloudfunctionTemplate/", // 云函数请求示例
"condition": {
"miniprogram": {
"list": [
{
"name": "db guide",
"pathName": "pages/databaseGuide/databaseGuide",
"query": ""
}
]
}
},
"srcMiniprogramRoot": "miniprogram/", // 貌似是那个小程序打包App的, 没搞清楚
"compileType": "miniprogram",
"packOptions": {
"ignore": [],
"include": []
},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 2
},
"projectArchitecture": "multiPlatform",
"simulatorPluginLibVersion": {
"wxext14566970e7e9f62": "2.27.3"
}
}

app.js

基本介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// app.js
App({
onLaunch:function () {

// 云开发环境sdk配置
if (!wx.cloud) {
console.error('请使用 2.2.3 或以上的基础库以使用云能力');
} else {
wx.cloud.init({
// env 参数说明:
// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境(第一个创建的环境)
env: '环境ID',
// traceUser: true,
});

// 全局变量配置
// 其他位置访问 getApp().globalData
this.globalData = {
userData: null
};
},
// 全局方法
// getApp().updataUserNovelList()
updataUserNovelList(){}
});

全局加载数据完毕后通知第一页更新UI数据

首页index的onload函数中为app注册回调事假, 之后app的全局onLaunch事件中进行请求, 异步请求完毕后调用回调事件更新界面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
//  index.js
onLoad(options) {
let self = this
// 注册回调, 等后端传回用户数据后更新页面
getApp().userInitCallBack=function(userData){
self.setData({
nickname: userData.nickName,
avatarUrl: userData.avatarUrl,
novel_list: userData.novel_list
})

console.info("index 数据初始化完毕", self.data)
// console.log("self.data.nickname:",self.data)
}

if (app.globalData.userData !== null){
console.log("当前用户信息变更为: ",app.globalData.userData)
let userData = app.globalData.userData
self.setData({
nickname: userData.nickName,
avatarUrl: userData.avatarUrl,
novel_list: userData.novel_list
})
}
}


// app.js
wx.cloud.callFunction({
// 云函数名称
name: 'user',
// 传给云函数的参数
data: {
type: "queryUser"
},
success:res=>{
// console.log("拿到的数据", res.result)
// 莫名其妙会变成数组, 干脆这里判断一下
if(res.result instanceof Array){
this.globalData.userData = res.result[0]
}else{
this.globalData.userData = res.result
}


console.info("后端数据加载完毕",this.globalData.userData)
this.userInitCallBack(this.globalData.userData);
console.info("用户身份初始化完毕", this.globalData.userData)
},
fail: err=>{
console.error(err)
}
})

事件绑定

捕获方式 : 事件名

1
2
<!-- bind:tap -->
<view class="result" wx:if="{{!searching}}" bind:tap="onSearchDetail"></view>

wx:if vs hidden

用法

1
2
3
<view wx:if="{{a>5}}">6</view>
<view wx:elif="{{a < 5}}">4</view>
<view wx:else>5</view>

性能对比

wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏
性能分析:wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。

因此,如果需要频繁切换的情景下,用 hidden 更好,如果在运行时条件不大可能改变则 wx:if 较好

组件使用

1
"usingComponents": {} // 使用字段

wxss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*自定义状态栏等透明问题*/
.status-bar, .status-bar-placeholder, .navigation-bar{
left: 0;
top: 0;
width: 100%;
/* border-bottom: 1rpx #000 solid; */
z-index: 20000; /*不加这个会透明*/
}

/*水平排列元素*/
/*给他父元素 设置display: flex; justify-content:left;*/
.menu-button{
position: absolute;
top: 298rpx;
display: flex;
justify-content:left;
padding-left: 40rpx;
padding-right: 40rpx;
}

/*小程序默认页面的背景颜色*/
background-color: #f6f6f6;

/*文字水平居中*/
.content .sort, .content .last-update{
text-align: center;
width: 100%;
}

/*文字垂直居中*/
/*文字行高和容器高相同*/
.content .sort, .content .last-update{
height: 100rpx
line-height: 100rpx;
}