龙空技术网

一个人开发一个产品,小程序从0到1,第2章 项目文件

老陈说编程 244

前言:

眼前大家对“rpxcss”大概比较着重,我们都想要剖析一些“rpxcss”的相关知识。那么小编在网上收集了一些对于“rpxcss””的相关内容,希望大家能喜欢,朋友们一起来了解一下吧!

在目录树下,点击pages目录,点击index目录,点击logs目录,点击utils目录,打开一切可以打开的目录,唯有如此,方能爽爽地窥探整个目录结构的全貌,方能更好地熟悉配置文件、应用文件和页面文件的应用。

2.1 配置文件

工程配置文件project.config.json,用来配置appid、项目名称、调试基础库,还有云开发的文件夹路径。如果你不想开发微信小程序了,不想在IT界混了,那你大可毫不留情地删除它,否则请保留。

索引配置文件sitemap.json,用于配置页面是否可被索引(搜索)。 action为allow表示同意索引,disallow表示不同意;page为*表示所有页面可被索引,pages/index/index则指定某个页面可被索引。

如果删除sitemap.json文件,则默认为所有页面都允许被索引。在实际开发产品时,几乎都是用默认,既aciton为allow的情况。细的规则在用到时,上网找一下就好了。

2.2 应用文件

一个小程序项目,在根目录下会有3个应用文件,一个是全局业务逻辑文件app.js,一个是公共配置文件app.json,还有一个是公共样式表文件app.wxss。在这3个文件中,app.js和app.json是不可删除,是必须有的文件。

1. app.js

打开文件的那一瞬间,我才知道:人生遇到的人很多,但真正懂你的人却寥寥无几。懂你的人,即使你不说话,他也知道你的喜怒哀乐。不懂你的人呢,就给你一大堆代码,也不管你是否有了基础。如果有基础,我看这个干啥,如果没有,我看这个干啥?

清空onLaunch里面的代码,只留一个空方法就好。好看的皮囊千篇一律,有趣的灵魂万里挑一。App()必须且只能在app.js中调用一次,否则会出现无法预期的后果。

在onLaunch或其他函数中,可通过this(App实例)调用globalData全局变量。

//app.jsApp({  onLaunch: function () {		let user = this.globalData.userInfo;  },  globalData: {    userInfo: null  }})

在App()里,除了onLaunch,还有onShow、onError等函数。

备注:当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。

如果想在onLaunch或onShow函数中,获取相关参数内容,只要带上参数option一起飞就可以了。

//app.jsApp({  /**   *启动执行的初始化方法   * 首次打开时执行,全局只触发一次   */  onLaunch: function(options) {    console.log('page:', options.path);  },  //小程序启动或从后台进入到前台时触发  onShow: function(options) {    console.log('scene:', options.scene);  },  //全局变量  globalData: {    userInfo: null  }})

输出结果:

page: pages/index/indexscene: 1001

options可以获取的值列表

2. app.json

全局配置文件,可配置且必须配置的页面路径;可配置窗口风格,如标题栏背景色和标题;可配置全局tab标签、网络超时时间和多tab等。常用配置项列表如下。

pages

每一项代表对应页面的路径和文件名(不用后缀),数组的第一项为首页。小程序添加或删除页面时,必须跟pages同步。

"pages": [  "pages/index/index",  "pages/logs/logs" ]

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

类型中的HexColor为十六进制颜色值,如"#ff0000"。属性backgroundColor配置的窗口背景色,在下拉刷新或上拉加载时才能见到。如果要配置页面背景色,可到app.wxss进行全局配置或到index.wxss进行单个页面配置。

"window": {  "backgroundTextStyle": "light",  "navigationBarBackgroundColor": "#00a24d",  "navigationBarTitleText": "导航栏标题",  "backgroundColor": "#cccccc",  "navigationBarTextStyle": "white",  "enablePullDownRefresh": true}

tabBar

如果小程序是一个多 tab 应用,可以通过tabBar配置项指定tab栏的表现,以及 tab 切换时显示的对应页面。tab数目最少 2 个、最多 5 个。

其中 list 接受一个数组,数组中的每个项都是一个对象,属性列表。

图标大小限制为40kb,建议尺寸为 81px * 81px,当postion为top,既tab在顶部时,iconPath和selectedIconPath无效。

在项目根目录下新建images目录,上网搜索“首页”、“日志”图标。图标默认颜色为:#8b8b8b,选中时颜色为:#00a24d,大小为81*81。如果实在不想折腾,那就关注公众号半码,输入:芝麻开门,获取图标下载地址。

"tabBar": {    "borderStyle": "black",    "backgroundColor": "#ffffff",    "color": "#8b8b8b",    "selectedColor": "#00a24d",    "list": [      {        "iconPath": "images/index.png",        "selectedIconPath": "images/index_p.png",        "pagePath": "pages/index/index",        "text": "首页"      },      {        "iconPath": "images/log.png",        "selectedIconPath": "images/log_p.png",        "pagePath": "pages/logs/logs",        "text": "日志"      }    ]  }

networkTimeout

网络请求的超时时间,默认为60000毫秒,既1分钟,在调用wx.uploadFile上传文件,wx.downloadFile下载文件,wx.request上传/下载数据和wx.connectSocket网络通信接口时会用到。

"networkTimeout": {    "request": 10000,    "downloadFile": 10000  }

requiredBackgroundModes

配置在后台运行的能力,目前只支持audio:后台播放音乐和location:后台定位两项。

"requiredBackgroundModes": [   "audio",   "location" ]

navigateToMiniProgramAppIdList

当前小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序appId 列表,最多允许填写 10 个。

navigateToMiniProgramAppIdList当前小程序需要使用 wx.navigateToMiniProgram 接口跳转到其他小程序时,需要先在配置文件中声明需要跳转的小程序appId 列表,最多允许填写 10 个。

permission

小程序用到敏感功能,如获取地理位置时,需要弹窗询问用户,用户点击同意后才可调用接口获取相关信息,如经纬度。询问窗口上的内容,就是这里的desc值。

"permission": {    "scope.userLocation": {      "desc": "唯有授予位置权限,才好找你吹牛皮"    }  }

3. app.wxss

WXSS是一套样式语言,用于描述WXML文件里的组件样式,决定组件应该怎么显示。为了可对wxss资源进行复用,小程序对CSS进行了扩充,使其支持:通过@import语句后接外联样式表的相对路径并用;结束的方式导入样式。

app.wxss为公共样式表,不用显示引入,便可在页面文件wxml中使用。

/** common.wxss **/.bg {    background-color: #cccccc;}/**app.wxss**/@import "common.wxss";.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  padding: 200rpx 0;  box-sizing: border-box;} 
2.3 页面文件

一个小程序应用,由index,logs等多个页面组成。一个页面,包含4个同名,不同后缀的文件,它们分别是负责配置的json,布局的wxml,样式的wxss和业务逻辑的js。其中,wxml和js是不可删除,是必须有的文件。

1. index.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖app.json的window中相同的配置项。

以上属性的含义跟app.json里的是一模一样的,我就不重复讲了,再讲的话,怕你用时间跟我换金钱。

{  "navigationBarTitleText": "首页",  "navigationBarTextStyle": "black"}

我没钱,只好说下页面json文件才有的disableScroll和usingComponents属性。disableScroll默认为false,设置为true时页面不能上下滚动。usingComponents用来引入第3方组件,唯有在json文件中引入的,才可以在wxml文件中使用。这个只是示例代码,等讲到组件时,就自然明白了。

{  "usingComponents": {    "mp-cells": "../../components/cells/cells",    "mp-cell": "../../components/cell/cell"  },  "disableScroll": true}

2. index.js

在页面js文件中,可在Page()里面指定页面的初始数据、生命周期回调、事件处理函数等;可在外面引入模块和getApp()等。

const util = require('../../utils/util.js')const app = getApp()Page({  data: {    motto: 'Hello World'  },  //自定义函数  bindViewTap: function() {},  //页面加载时触发  onLoad: function() {}})

初始化数据的data,在页面第一次渲染时使用。自定义函数bindViewTap,绑定页面组件,在用户触发时调用。onLoad为生命周期函数,在页面加载时触发,可通过this调用自定义函数。有关函数的更多内容,咱骑驴看唱本,走着瞧。

3. index.wxml

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出wxml页面的结构。关于WXML的更多内容,在后面会花多点篇章、花多点时间、花多点心思进行详细的介绍。

<!—pages/index/index.wxml--><view class="container">    <text class="user-motto">{{motto}}</text></view>

4. index.wxss

在page的 wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。

/**index.wxss**/.userinfo {  display: flex;  flex-direction: column;  align-items: center;}.userinfo-avatar {  width: 128rpx;  height: 128rpx;}.usermotto {  margin-top: 200px;}

能坚持看到这的人,都是能做事的码农,如果能答对我要问的问题,肯定会让他人佩服得五体投床的。那么问题就来了:仔细观察上面index.wxss里的内容,猜一猜哪一个东西在CSS是没见过的?

没错,rpx在CSS里是不曾有过的,你猜对没?--如果猜对的话,我就五体投床去了,如果没猜对的话,我就五体投床去了,因为五体投地还得洗衣服。

rpx为小程序特有的尺寸单位,可解决屏幕宽度进行自适应的问题。它以屏幕宽为750rpx为基准。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

猜对上面问题的人,给你10分钟,一边嘚瑟去吧。没猜对的人,赶紧抓紧机会,猜猜.userinfo和.usermotto用的是哪种选择器?

没错,答案就在下表中。你真聪明!

好了,项目文件就这样了,没什么要说的了。如果你还没搞懂的话,就从头到尾再多学几遍,如果你还没搞懂的话,就从头到尾再多学几遍,直到能去框架语法为止。

标签: #rpxcss