关于前端:基础篇项目技术栈及其基础知识储备

3次阅读

共计 6679 个字符，预计需要花费 17 分钟才能阅读完成。

你须要在本地装置微信开发者工具，即集开发编译运行环境于一体的工具。
本我的项目技术栈基于 ES2015+、WXML、WXSS、JavaScript、微信原生 API 和云开发，所有的申请数据都应用云数据库的小程序端 SDK 进行查问，提前理解和学习这些常识会对应用本我的项目有很大的帮忙。
接下来，咱们一起大抵梳理一下，本我的项目须要用到的一些技术基础知识，所谓删繁就简三秋树。

小程序蕴含一个形容整体程序的 app 和多个形容各自页面的 page。

一个小程序主体局部由三个文件组成 app.js、app.json、app.wxss，必须放在我的项目的根目录；
一个小程序页面由四个文件组成，别离是：js、wxml、json、wxss；
如下：
```
└── miniprogram 小程序目录
├── app.js 小程序全局入口
├── app.json 小程序全局配置
├── app.wxss 小程序全局款式
├── pages 页面目录
│ │── index 首页
│ ├── index.wxml 页面构造
│ ├── index.js 页面逻辑
│ ├── index.json 页面配置
│ └── index.wxss 页面款式
└── image 图片资源
```
页面构造

模板语法 WXML

view 标签和 text 标签

咱们当初做的是微信小程序，所以，要应用它的语法。WXML（WeiXin Markup Language）是微信小程序框架设计的一套标签语言。
留神！不要被官网的很官网的概念唬住了，其实就是简略的标签。不信，咱们举个栗子类比看看。置信大多数小伙伴，即便没有做过开发的都听过，html 的 div 和 span。
```
div => view
span => text
```
view 其实相当于 div，都是块级元素，也就是会换行的；
text 相当于 span，都是行内元素，也就是不会换行的。
入手试试吧，在 index.wxml 间接应用这两个标签就明确了。
```
<view> 马原 </view>
<view> 毛中特 </view>
<view>
   <text> 思修 </text>
   <text> 近代史 </text>
</view>
```
什么？还有点迷糊？这样看呢！

保姆级演示，明确了“view 是块级元素，会换行的；text 是行内元素，不会换行的”这句话了没？
或者我当前不会这么讲了，因为切实是太太太根底了。简略的事件，只说一遍。
不明确不要紧，就像公式，你不必晓得是怎么来的，你只有记住公式是怎么用的就行了。
毕竟咱们做的是利用层面的开发嘛，它提供什么 API，晓得怎么用的，而后间接去应用就行了。如果能触类旁通，就更好了。

在 js 的 data 中定义变量：

data:{
  title:"考研题库小程序",
  num:50,
  isLogin:true,
  user:{
    nickName:"姑苏洛言",
    age:20
  },
  isChecked:true
}

在 wxml 中间接应用：

<!-- 字符串类型 -->
<view>
{{title}}
</view>

<!-- 数字类型 -->
<view>
{{num}}
</view>

<!-- 布尔类型 -->
<view>
{{isLogin?'你好，xx 会员':'请受权登录'}}
</view>

<view wx:if="{{isLogin}}">{{user.nickName}}</view>
<view wx:else="{{isLogin}}"> 请先登录 </view>

<!-- 应用 bool 类型充当属性 check 字符串和花括号之间不要存在空格，否则会导致辨认辨认 -->
<checkbox checked="{{isChecked}}"></checkbox>

<!-- 对象类型 -->
<view>
昵称：{{user.nickName}}，年龄{{user.age}}
</view>

再理解一下，其余一些根本运算。

<!-- 算数运算 -->
<view>{{a + b}}</view>

<!-- 三元运算 -->
<view hidden="{{flag ? true : false}}"> Hidden </view>

<!-- 逻辑判断 -->
<view wx:if="{{length > 5}}"> 今日刷题挑战胜利 </view>
<view wx:else> 今日刷题挑战失败 </view>

列表渲染，其实说白了就是咱们说的数组循环。
列表渲染，关键字：

wx:for
wx:for-item
wx:for-index
wx:key

wx:for="{{list1}}"
wx:for-item="循环项的名字" => wx:for-item="item"
wx:for-index="索引项的名字" => wx:for-index="index"" 循环项的名字 "默认 =“item”" 索引项的名字 " 默认 =“index”

值有两种：
1）当对数组对象做循环的时候：

list1:[{id:'1', name: '马原'},{id:'2', name: '毛中特'},{id:'3', name: '思修'},{id:'4', name: '近代史'}]

wx:key="id" => item.id

2）当数组是一般数组：

list1: ['马原', '毛中特', '思修', '近代史']
wx:key="*this"

index.js

Page({
data: {
// 一般数组
list1: ['马原', '毛中特', '思修', '近代史'],

// 对象数组的循环
list2: [{id:'1', name: '马原'},
{id:'2', name: '毛中特'},
{id:'3', name: '思修'},
{id:'4', name: '近代史'}
]
}
})

index.wxml

<view>
<view> 一般数组 </view>
<view wx:for="{{list1}}" wx:key="*this">
{{index}} --- {{item}}
</view>
<view>======================</view>
</view>

<view>
<view> 对象数组 </view>
<view wx:for="{{list2}}" wx:key="id">
{{index}}:{{item.name}}--{{item.id}}
</view>
</view>

1）wx:if
if、else、else if 对应微信小程序模板语法别离为 wx:if、wx:else、wx:elif

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

2）hidden
在标签上间接加属性 hidden。
3）什么场景下应用哪一个？

当标签不是频繁的切换显示，优先应用 wx:if 间接把标签从页面构造给移除掉；
当示意频繁的切换显示，优先应用 hiddem 通过增加款式的形式来切换显示。

事件的绑定

1）绑定事件通过 bind+ 事件名；
2）定义事件的回调须要放在 js 文件和 data 同层级。
.wxml
```
<view bindtap="handleTap">
{{num}}
</view>
```
.js
```
Page({
data: {num: 0},

// 申明了点击事件的回调
handleTap() {
let num = this.data.num;
num++;

this.setData({num})
}
})
```
原生组件

在考研刷题小程序中，罕用的原生组件：view、text、image、button、radio、checkbox、swiper 等。

view

视图容器，也就是块级元素。

text

文本标签，也就是行内元素。
1）text 组件内只反对 text 嵌套。
2）设置 user-select 属性，长按文本可选、复制。
3）能够对空格、回车进行解析显示。

image

图片组件。
1）默认的宽度和默认的高度 320 * 240。
2）内置懒加载 lazy-load。
3）mode 渲染模式：
scaleToFill：默认值。把图片内容，拉伸到相框的大小。
widthFix：把图片变成了和以前 web 中的图片的渲染模式一样。web 图片，当宽度扭转的时候，高度会等比例的跟着扭转。挪动端开发 img width:100%。
aspectFit：等比例拉伸图片 - 内容，可能会导致，image 相框留出空白。
aspectFill：等比例拉伸图片 - 内容，图片的内容会被截取（图片内容会撑满相框）。

button

按钮组件。

单选我的项目，在考研刷题小程序我的项目中用于单项选择题。

多选我的项目，属性和单选 radio 大略统一。在考研刷题小程序我的项目中用于多项选择题。

滑块视图容器。其中只可搁置 swiper-item 组件，否则会导致未定义的行为。

WXSS(WeiXin Style Sheets)是⼀套款式语言，用于形容 WXML 的组件款式。与 CSS 相比，WXSS 扩大的个性有：

响应式长度单位 rpx
款式导入

全局款式 app.wxss

app.wxss 是默认的全局款式。把全局的款式的代码都写到这里：
```
page{background-color: #ffffff;}
```
page 标签是页面最外层的标签。

款式语法

在 wxss 中不反对通配符 *，所以当咱们要实现以下成果的时候：
```
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
只可能单个标签一个一个的定义了。语法像这样写：
```
page,view,text{
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
rpx

小程序中的单位 rpx，性能和以前挪动端的 web 中的rem 相似，rpx（responsive pixel）: 能够依据屏幕宽度进行自适应。规定屏幕宽为750rpx。
1）不论屏幕多宽，都是 750rpx；
2）不论手机屏幕多宽都是 100%；

款式导入

当咱们须要援用一个样式表文件时，通过 @Import 引入，用的是相对路径。
```
@import "../../styles/common.wxss";
```

只是一个事件而已！！只是会在特定的时候，会主动触发。
分为两种：

利用的生命周期 app.js；
页面的生命周期；
一个微信小程序我的项目其实一个 利用 ，一个利用外面能够领有多个 页面。

看看考研刷题小程序我的项目中的 app.js：

App({

// 小程序在启动的时候 触发
onLaunch: function (options) {
// 当利用开始启动的时候，能够获取用户的一些信息
console.log("onLaunch");
},

// 小程序被展现 的时候触发
// 重复被触发
onShow: function (options) {console.log("onShow");
},

// 小程序被暗藏的时候触发
onHide: function () {console.log("onHide");
},

// 当利用出错了时候会 触发
// 在这里 捕捉错误信息
// 把错误信息收集 - 发送 ajax 异步申请 发送到后盾中
onError: function (msg) {
// msg：错误信息
console.log("onError");
console.log(msg);
},

// 当页面找不到了 就会触发了
onPageNotFound: function (options) {

},

// 利用的全局数据
globalData: {title:"生命周期"}
});

看看考研刷题小程序我的项目中的首页 index.js：

Page({data: {},

// 页面开始加载的时候触发
// 发送异步申请 获取数据来渲染页面
onLoad: function(options) {console.log("onLoad");
},

// 页面标签都渲染结束 才触发
onReady: function() {console.log("onReady");
},

// 页面被 显示 页面切换 - 页面路由
onShow: function() {console.log("onShow");
},

// 页面被暗藏
onHide: function() {console.log("onHide");
},

// 页面被 卸载的时候 - 当页面切换的时候 应用了不同的 open-type 会敞开以后页面的
onUnload: function() {
// 能够敞开一些定时工作
console.log("onUnload");
},

// 当页面 下拉刷新的时候触发
// 在全局配置或者 页面配置中 手动开启 下拉刷新！！！onPullDownRefresh: function() {console.log("onPullDownRefresh");
},

// 上拉页面 上拉加载下一页数据
onReachBottom: function() {console.log("onReachBottom");
},

// 当页面被转发的时候
onShareAppMessage: function() {console.log("onShareAppMessage");
},

// 页面被滚动的时候
onPageScroll: function() {console.log("onPageScroll");
},

// 当点击 tabbar 的时候触发
onTabItemTap:function(item) {}});

在小程序中所有页面的路由全副由框架进行治理。
注意事项：

navigateTo, redirectTo 只能关上非 tabBar 页面。
switchTab 只能关上 tabBar 页面。
reLaunch 能够关上任意页面。
页面底部的 tabBar 由页面决定，即只有是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数能够在指标页面的 onLoad 中获取。

页面配置

全局配置 app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的门路、窗口体现、设置网络超时工夫、设置多 tab 等。
以下是一个蕴含了局部罕用配置选项的 app.json：
```
{
"pages": [
"pages/index/index",
"pages/test/test",
"pages/result/result"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "护网专题信息安全常识竞答",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}
```
残缺配置项阐明请参考小程序全局配置。

页面的配置

每一个小程序页面也能够应用同名 .json 文件来对本页面的窗口体现进行配置，页面中配置项会笼罩 app.json 的 window 中雷同的配置项。
例如：
```
{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "积分排名",
"navigationBarTextStyle": "black"
}
```
残缺配置项阐明请参考小程序页面配置。

API

小程序开发框架提供丰盛的微信原生 API，能够不便的调起微信提供的能力，如获取用户信息，本地存储，领取性能等。
然而，这次咱们在我的项目中，用到的次要是云开发 API。比方：add、get、update 申请等。

云开发 API

开明并应用微信云开发，即可应用云开发 API，在小程序端间接调用服务端的云函数。
get 申请代码示例：
```
const db = wx.cloud.database();
db.collection('todos')
.where({_openid: 'xxx' // 填入以后用户 openid})
.get()
.then(res => {console.log(res.data)
})
```
调用云函数代码示例：
```
wx.cloud.callFunction({
// 云函数名称
name: 'cloudFunc',
// 传给云函数的参数
data: {
a: 1,
b: 2,
},
success: function(res) {console.log(res.result) // 示例
},
fail: console.error
})

// 此外，云函数同样反对 promise 模式调用
```
小结

微信小程序应用了最新的前端技术栈，具备原生 APP 体验服务的小程序框架，小程序视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，响应的数据绑定，提供了丰盛的根底组件和 API 以及能力。

正文完

前端

发表至：前端

2023-04-19

0

关于前端:电脑必备应用

关于前端:讲解CPT210-Coursework

关于前端:为了生成唯一idReact18专门引入了新HookuseId

关于前端:Promise拆解计划手写Promise并通过官方全部测试用例

关于linux:国产凝思80系统网络配置

关于前端:基础篇项目技术栈及其基础知识储备

前言

原生小程序框架

页面构造

模板语法 WXML

view 标签和 text 标签

数据绑定

列表渲染

条件渲染

事件的绑定

原生组件

view

text

image

button

radio

checkbox

swiper

页面款式

层叠款式 WXSS

全局款式 app.wxss

款式语法

rpx

款式导入

页面逻辑

生命周期

利用的生命周期

页面的生命周期

页面路由

页面配置

全局配置 app.json

页面的配置

API

云开发 API

小结

站内搜索