一个小程序应用, 由 index,logs 等多个页面组成. 一个页面, 包含 4 个同名, 不同后缀的文件, 它们分别是负责配置的 JSON, 布局的 wxml, 样式的 wxss 和业务逻辑的 JS. 其中, wxml 和 JS 是不可删除, 是必须有的文件.
4.1 index.JSON
每一个小程序页面也可以使用. JSON 文件来对本页面的窗口表现进行配置. 页面中配置项在当前页面会覆盖 App.JSON 的 Windows 中相同的配置项.
以上属性的含义跟 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
- }
4.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 调用自定义函数. 有关函数的更多内容, 咱骑驴看唱本, 走着瞧.
4.3 index.wxml
WXML(WeiXin Markup Language) 是框架设计的一套标签语言, 结合基础组件, 事件系统, 可以构建出 wxml 页面的结构. 关于 WXML 的更多内容, 在后面会花多点篇章, 花多点时间, 花多点心思进行详细的介绍.
- <!-pages/index/index.wxml-->
- <view class="container">
- <text class="user-motto">{{motto}}</text>
- </view>
4.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 用的是哪种选择器?
没错, 答案就在下表中. 你真聪明!
好了, 项目文件就这样了, 没什么要说的了. 如果你还没搞懂的话, 就从头到尾再多学几遍, 如果你还没搞懂的话, 就从头到尾再多学几遍, 直到能去基础语法为止.
来源: https://www.cnblogs.com/halfcode/p/12454489.html