「2.0」一个人开发一个App,小程序从0到1,文件剖析

不知你是不是见到“文件剖析”这4个大字,才点进来看一看的?如果真是的话,那我可以坦诚、真心、负责任地告诉你:你上当了,你上了贼船啦,如果你现在想跳的话,还来得及,反正茫茫大海中,鲨鱼正缺搞程序的人。说你上当了,是因为我根本就剖析不了。我顶多只能做到分析。

2.1 配置文件分析

赶快打开微信开发工具,快速进到项目窗口中。展开pages,展开index,展开logs,展开utils,展开一切可以展开的。唯有如此,方能见到整个项目的全貌。

项目中,工程配置文件project.config.json,可用来配置appid、项目名称、调试基础库,还有云开发的文件夹路径,至于其他的,几乎不会做任何改动。

项目中,页面索引文件sitemap.json,可配置页面是否可被索引(搜索), action为allow表示同意,disallow表示不同意;page为*表示所有页面,pages/index

/index指定某个页面。

小程序项目中,除了配置文件外,还有应用文件和页面文件。

「2.0」一个人开发一个App,小程序从0到1,文件剖析

 

2.2 页面文件分析

一个小程序应用,由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>

<image src=""></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文件

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyspyf.html