不知你是否是见到“文件剖析”这4个大字,才点进来看一看的?若是真是的话,那我能够坦诚、真心、负责任地告诉你:你上当了,你上了贼船啦,若是你如今想跳的话,还来得及,反正茫茫大海中,鲨鱼正缺搞程序的人。说你上当了,是由于我根本就剖析不了。我顶多只能作到分析。程序员
2.1 配置文件分析json
赶快打开微信开发工具,快速进到项目窗口中。展开pages,展开index,展开logs,展开utils,展开一切能够展开的。惟有如此,方能见到整个项目的全貌。小程序
项目中,工程配置文件project.config.json,可用来配置appid、项目名称、调试基础库,还有云开发的文件夹路径,至于其余的,几乎不会作任何改动。微信
项目中,页面索引文件sitemap.json,可配置页面是否可被索引(搜索), action为allow表示赞成,disallow表示不一样意;page为*表示全部页面,pages/index微信开发
/index指定某个页面。app
小程序项目中,除了配置文件外,还有应用文件和页面文件。xss
2.2 页面文件分析ide
一个小程序应用,由index,logs等多个页面组成。一个页面,由负责配置的json,布局的wxml,样式的wxss和业务逻辑的js组成。函数
这是一个关于1+1+1+1=4的故事,故事从配置文件json开始。工具
2.2.1 json文件
json文件可配置窗口顶部导航栏的背景色、标题、标题颜色和引入第3方组件。第3方组件,惟有在json文件中引入,方可在wxml文件中使用。
{
"usingComponents": {
"mp-cells": "../../components/cells/cells",
"mp-cell": "../../components/cell/cell"
},
"navigationBarTitleText": "关于",
"navigationBarTextStyle": "black"
}
2.2.2 wxml文件
wxml文件,对手机界面进行布局。布局可从左到右,上到下;可从右到左,下到上;可左青龙,右白虎,上图片,下按钮。
上图片,下按钮是我要实现功能,而左青龙,右白虎是留给你的做业,记得按时完成哦。完成以后,仔细观察一下代码,你就会发现有个莫名其妙的container,莫名其妙地出如今那里。不要急,存在便是合理,只是还没说到wxss文件而已。
<view class="container">
<image src="../../images/long.png" style="width: 750rpx;height: 450rpx"></image>
<button>肯定</button>
</view>
2.2.3 wxss文件
wxss文件,是wxml的好基友,一直站在wxml背后,承担着化妆师(样式)的工做。这就是,每一个成功的wxml,背后都会有一个wxss的来由。正是有了wxss的支持,wxml才能够放心、大胆地布局,大胆地布局天下。
好看的皮囊千篇一概,有趣的灵魂万里挑一,光有布局,光有一张靓丽的外表,不足以成就大业。若想成就大业,得靠js文件来实现,实现业务逻辑。
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
2.2.4 js文件
js文件,实现业务逻辑并把结果显示在wxml中,昭告天下。若是只是实现一个简单任务,像计算1+1=2这种,那单个js应该是没问题的,只是理想很丰满,现实很骨感,一个小程序应用,每每要实现的功能远远不止于如此。
为了提升开发效率,可把一些通用的功能,放在一个通用的js文件里,并放置在utils下。等页面中的js文件要使用时,用require引入即可。
既然有js可共用,那是否有wxss可供共用?有的,app.wxss文件即是。
const util = require('../../utils/util.js')
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动做
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
2.3 app.wxss文件
app.wxss文件,为整个应用的样式配置文件。在这里配置的样式,可供全部页面共用,并且不用任何操做。真好,微信产品经理,总算作了一件让程序员省心的事了。
一说到省心,你就开心,一开心,便得意忘形,忘记还有app.js和app.json未被说起。这两个家伙,但是很重要的角色。
app.js,是一名有着一夫当关万夫莫开本事的土匪。若要进到页面,得先过app.js这一关,此路是他开此树是他栽,要想今后过,脱下裤子来。
就是说,全局的内容,全局变量和全局的业务逻辑,在这里实现。至于全局的配置,请移步到app.json文件中。
//app.js
App({
onLaunch: function () {
// 展现本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
globalData: {
userInfo: null
}
})
2.4 app.json文件
app.json文件,对整个应用进行配置的配置文件。在这,可配置统一风格的窗口(window)风格,包括页面的标题栏背景色,标题(这个不太可能),标题颜色;
可配置且必须配置的页面路径(pages);可配置全局切换标签,可配置定位等权限声明和受权提示信息,可引入第3方插件。
可,可,可,渴就喝水去。
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"permission": {
"scope.userLocation": {
"desc": "请授予位置服务权限,以便更好的吃饭"
}
},
"tabBar": {
"borderStyle": "black",
"backgroundColor": "#ffffff",
"color": "#1b1b1b",
"selectedColor": "#2b2b2b",
"list": [
{
"iconPath": "images/about.png",
"selectedIconPath": "images/about_p.png",
"pagePath": "pages/about/index",
"text": "关于"
},
{
"iconPath": "images/my.png",
"selectedIconPath": "images/my_p.png",
"pagePath": "pages/my/index",
"text": "个人"
}
]
},
"sitemapLocation": "sitemap.json"
}
等等,听我讲了大半天,是否是感受少了点什么,没错,少了给我发红包了。少了讲开发工具生成的源代码了,少了怼微信产品经理了。
好吧,那我就再怼一句,微信的小程序的产品经理,大家生成的代码,我看不懂,也不想看,下一节,我就通通把它们删掉。