# 微信小程序基本结构
│-----------------------------
├── cloudfunctions 云函数目录
│ ├── decrypt
│ │ │-index.js//云函数
│ │ │-config.json//配置
│ ├── geocoder
│ ├── he-air
│ ├── he-weather
│ ├── jscode2session
│ └── weather
│——miniprogram
│ ├── components 组件库
│ │ └── icon
│ ├── images 图片等静态资源
│ │ └── cloud.jpg
│ ├── pages 页面目录
│ │ ├── diary
│ │ └── weather
│ ├── app.js 小程序全局app相关js
│ ├── app.json 小程序配置文件
│ ├── app.wxss 小程序全局app样式
└── project.config.json 工具项目配置文件
//可动态修改标题
wx.setNavigationBarTitle({
title: music.name,
})
# app.json
- app.json：小程序的全局配置，包括了所有页面路径、界面表现、网络超时时间、底部 tab、插件等，常用的两个配置是 window 和 pages
- requiredBackgroundMode:后台播放音乐，设置audio即可
//app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"requiredBackgroundModes":["audio"],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "xxx",
"navigationBarTextStyle":"black"
},
"tabBar":{
"list":[
{
"pagePath":"pages/index/index",
"text":"首页",
"iconPath":"./assets/tab-bar/home.png",
"selectedIconPath":"/assets/tab-bar/home-active.png"
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath": "./assets/tab-bar/user.png",
"selectedIconPath": "/assets/tab-bar/user-active.png"
}
]
}
}
# page页面中json配置
{
//使用组件
"usingComponents": {
"x-playlist": "/components/playlist/playlist"
},
//允许下拉刷新
"enablePullDownRefresh": true,
//不需要上下滑动
"disableScroll": true
}
# page中js
// miniprogram/pages/playlist/playlist.js
Page({
data: {
swiperImgUrls: [],
playlist: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
# 组件的js配置
组件的方法包裹在methods中，生命周期写在lifetimes中且名字前不需要加on
// components/playlist/playlist.js
Component({
/**
* 组件的属性列表
*/
//父级传来的数据
properties: {
playlist: {
type: Object,
}
},
//监听
observers: {
['playlist.playCount'](count) {
this.setData({
_count: this._tranNumber(count, 2)
})
}
},
/**
* 组件的初始数据
*/
data: {
_count: 0
},
lifetimes: {
ready() {
if (this.properties.isSame && this.data.showTime.totalTime == '00:00') {
this._setTime()
}
this._getMovableDis()
this._bindBGMEvent()
},
},
//组件所在页面的生命周期
pageLifetimes: {
show() {
this.setData({
playingId: parseInt(app.getPlayMusicId())
})
}
},
/**
* 组件的方法列表
*/
methods: {
goToMusiclist() {
wx.navigateTo({
url: `../../pages/musiclist/musiclist?playlistId=${this.properties.playlist.id}`,
})
},
_tranNumber(num, point) {
xxxx
}
}
})
<view class='k-container'>
<view>你好啊 {{name}}</view>
<input value="{{val}}" bindinput='input' placeholder="请输入想做的事"/>
<button bindtap="addTodo">添加</button>
<view wx:for="{{todos}}">
<view>{{index}}: {{item}}</view>
</view>
</view>
全部生命周期如下表所示。
| 生命周期 | 参数 | 描述 |
|---|---|---|
| created | 无 | 在组件实例刚刚被创建时执行 |
| attached | 无 | 在组件实例进入页面节点树时执行 |
| ready | 无 | 在组件在视图层布局完成后执行 |
| moved | 无 | 在组件实例被移动到节点树另一个位置时执行 |
| detached | 无 | 在组件实例被从页面节点树移除时执行 |
| error | Object Error | 每当组件方法抛出错误时执行 |
还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：
| 生命周期 | 参数 | 描述 |
|---|---|---|
| show | 无 | 组件所在的页面被展示时执行 |
| hide | 无 | 组件所在的页面被隐藏时执行 |
| resize | Object Size | 组件所在的页面尺寸变化时执行 |
# project.config.json
project.config.json：这个是配置项目工具相关的，比如开发者工具的编译设置（是否使用 ES6 语法等）、界面设置，以及云函数相关的 cloudfunctionRoot
{
"miniprogramRoot": "miniprogram/",
"cloudfunctionRoot": "cloudfunctions/",
"setting": {
"urlCheck": true,
"es6": true,
"postcss": true,
"minified": true,
"newFeature": true,
"enhance": true
},
"appid": "wx0626d6298b27b962",
"projectname": "music",
"libVersion": "2.8.1",
"simulatorType": "wechat",
"simulatorPluginLibVersion": {},
"cloudfunctionTemplateRoot": "cloudfunctionTemplate",
"condition": {
"search": {
"current": -1,
"list": []
},
"conversation": {
"current": -1,
"list": []
},
"plugin": {
"current": -1,
"list": []
},
"game": {
"list": []
},
"gamePlugin": {
"current": -1,
"list": []
},
"miniprogram": {
"current": 0,
"list": [
{
"id": -1,
"name": "db guide",
"pathName": "pages/databaseGuide/databaseGuide",
"query": ""
},
{
"id": -1,
"name": "pages/blog/blog",
"pathName": "pages/blog/blog",
"scene": null
}
]
}
}
}
- 小程序不支持复杂的表达式，目前支持简单的三元、加减和逻辑判断，如果要使用形如 NaN 的函数调用语法，需要 WXS 支持
<wxs src="./demo.wxs" module="tools" />
<view>{{ tools.toNumber(num) }}</view>
// demo.wxs
function toNumber(n){
return parseInt(n)+1
}
module.exports.toNumber = toNumber