乐趣区

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

前言

你须要在本地装置微信开发者工具,即集开发编译运行环境于一体的工具。
本我的项目技术栈基于 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

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

checkbox

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

swiper

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

页面款式

层叠款式 WXSS

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";

页面逻辑

生命周期

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

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

利用的生命周期

看看考研刷题小程序我的项目中的 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 以及能力。

退出移动版