前言

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