小程序初识与项目新建
微信小程序（Mini Program）是一种不需要下载安装既可以使用的应用，它实现了应用”触手可及“的梦想，用户扫一扫或者搜一下便可以打开应用，今天我们简单的认识一下微信小程序的原生框架（mina）。
环境准备
- 使用全新的邮箱注册账号，在微信小程序后台获取APPID
- 微信开发者工具
需要在官网上手动下载此工具，这是集齐开发，预览，调试，发布于一身的完整环境，但是它的编码体验不是太好，一般我是通过vscode+微信开发者工具一同进行编码，vscode负责敲代码，微信开发者工具负责预览~
项目搭建的目录结构
| 文件夹名称 | 作用 |
|---|---|
| styles | 存放公共样式 |
| components | 存放自定义组件 |
| lib | 存放第三方库 |
| utils | 自己的工具库 |
| request | 自己的接口相关的帮助库 |
| icons | 存放图标的文件 |
小程序的配置文件
一个小程序会包含最基本的两种配置文件，一种是全局的app.json和页面自己的page.json,需要注意的是，配置文件中不能出现注释。
- 全局配置app.json
是当前小程序的全局配置，包括小程序所有页面路径，界面表现，网络超时时间，底部tab等，具体各项配置推荐查看官网。欢迎大家访问 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/config.html" target="_blank">微信小程序全局配置详解</a>。 - 页面配置page.json
是用来定义页面目录下的page.json这类和小程序页面相关的配置，开发者可以独立定义每个页面的一下属性，比如顶部颜色，是否允许下拉刷新等等，页面中的配置只能设置app.json中window配置项的内容，而且页面中配置项会覆盖app.json中的window中相同的配置项。
模板语法
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件，事件体统，可以构建出页面的结构。
- 数据绑定
<!--text相当于是span标签，view标签相当于是div标签 -->
<!-- 在标签中变量的使用, 必须用”“包裹起来 -->
<view data-msg="{{mag}}">
</view>
<!-- 在使用boolean充当属性 checked，字符串和花括号之间一定不要存在空格，否则会导致识别失败 -->
<view>
<checkbox checked="{{isChecked}}"></checkbox>
</view>
<!-- 在标签中变量的使用 -->
<view data-msg="{{msg}}">
自定义属性
</view>
// js文件中的data{}放的是普通数据声明~
Page({
data: {
msg: 'hello mina',
isChecked: 'true',
})
- 运算
所谓的运算就是说可以 在花括号中加入表达式
表达式： 指的是一些简单运算，数字运算，字符串拼接，逻辑运算，三元运算符
语句： 复杂的代码段【if else switch...】具体看相关代码
注意：如果花括号和引号之间有空格，将会被解析成字符串
- 循环
- 列表循环 wx:for="{{数组或者对象}} wx:for-item="循环项的名称" wx:for-index="循环项的索引"
- 对象循环 wx:for="{{对象}} wx:for-item="对象的值" wx:for-index="对象的属性" "
wx:key 用来提高数组渲染的性能，它绑定的值有如下的选择
- wx:key="唯一的值" 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一值
- wx:key="this" 表示当数组是一个普通的数组比如【1，2，3，4】时，this表示循环项本身，*this必须是唯一的字符串和数组
嵌套循环，绑定的名称不要重名，小程序默认叫item，和index，所以默认只有一层循环的时候可以不用写wx:for-item="循环项的名称" wx:for-index="循环项的索引"
在循环中可以巧妙的使用block标签，它相当于占位符标签，页面渲染的时候会被移除掉，最终不会变成真正的dom元素
- 条件渲染
可以有两种方式① wx:if ②hidden
事件绑定
小程序中的绑定事件，是通过bind关键字来实现的，比如常用的bindtap,bindinput,bindchange等，不同的组件支持不同的事件，具体需要参照组件的说明。
<!-- wxml-->
<input type="text" bindinput="handleInput"/>
<!-- page-->
handleInput(e){
console.log(e)
}
需要注意的事件参数传值：
绑定事件时，不能带参数，不能带括号，要通过标签自定义属性的方式进行传值，具体看demo
<!-- wxml-->
<button bindtap="handletap" data-operation="{{1}}">+</button>
<button bindtap="handletap" data-operation="{{-1}}">-</button>
<!-- page-->
handletap(e){
console.log(e);
// 获取自定义属性，即传过来的参数operation
const operation = e.currentTarget.dataset.operation;
this.setData({num: Number(this.data.num) + operation})
}
样式WXSS
WXSS(WeiXin Style Sheets)是小程序的样式语言，用于描述WXML的组件样式，但是相比于css，wxss也有一些新的特性：
-
响应式长度单位 rpx
rpx可以根据屏幕看度进行自适应，规定屏幕宽度未750rpx,如果屏幕宽度未375px,则750rpx = 375px = 750物理像素，所以换算步骤为：- 确认设计稿宽度pageWidth
- 计算比例 750rpx = pageWidth px,所以1px = 750rpx/pageWidth
- 在less文件中，主要把设计稿中的px => 750/pageWidth rpx即可
样式导入
wxss中直接就支持样式导入功能，通常使用@import语句来导入外联样式,而且只支持相对路径选择器
小程序不支持通配符 *-
小程序中使用less
原生小程序是不支持less的，但是我们可以通过以下方式来实现- 编辑器vscode
- 安装插件 easy less
- 在vscode中的setting.json设置如下代码，进行配置
"less.compile": { "outExt": ".wxss" }- 在编写样式的地方新建less文件，然后正常编辑即可
自定义组件
小程序也像其他前端框架一样，可以允许用户使用自定义组件的方式来构建页面，组件的组成也类似于页面，由json, wxml, wxss, js四个文件组成，我们可以在微信开发者工具中快速创建组件的文件结构 ~
- 屏幕快照 2021-05-18 下午4.53.27.png
创建和使用组件的步骤
- 一般在外层components文件夹下，创建一个组件文件夹，通过右键快速创建相关的文件,假如我们创建一个tab组件
<!--自定义组件的wxml-->
<view class="tabs_content">
<!-- 就是个占位符，父调用子组件，就传递相应的内容 -->
<slot></slot>
</view>
- 在父组件的json中，声明引用组件的位置
{
"usingComponents": {
"Tabs": "../../components/tabs/tabs"
}
}
- 在父组件的wxml中引用组件
<Tabs></Tabs>
父子组件传值
父组件向子组件传递数据，通过标签属性来传递
子向父传递数据，通过事件的方式传递
具体过程：
父传子
子传父
<!-- 子组件 -->
view class="tabs_title">
<view
bindtap="handleTap"
wx:for="{{tabs}}"
wx:key="id"
data-index="{{index}}"
class="tabs_item {{item.isActive ? 'active' : ''}}">
{{item.name}}
</view>
</view>
<view class="tabs_content">
<!-- 就是个占位符，父调用子组件，就传递相应的内容 -->
<slot></slot>
</view>
<!-- 子组件js文件中通过使用triggerEvent方法，指定事件名和需要传的参数对象 -->
methods: {
handleTap(e){
const { index } = e.currentTarget.dataset;
// 触发父组件自定义函数，并传递参数，在父组件中的对应的是binditemChange事件绑定
this.triggerEvent("itemChange", {index});
}
}
<!-- 父组件 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange">
<block wx:if="{{tabs[0].isActive}}">0</block>
<block wx:elif="{{tabs[1].isActive}}">1</block>
<block wx:elif="{{tabs[2].isActive}}">2</block>
<block wx:else>3</block>
</Tabs>
//接受子组件的数据
handleItemChange(e){
let { index }=e.detail;
let {tabs}=this.data;
tabs.forEach((v, i) => {
i === index ? v.isActive=true : v.isActive=false;
});
this.setData({tabs})
}
小程序的生命周期
- 应用的生命周期即app.js
onLaunch(){} =>应用第一次启动触发的事件，获取用户个人信息
onShow(){} => 应用被用户看到 从别的地方切到小程序的时候，对应用的数据或者页面效果进行重置
onHide(){} => 应用隐藏,用来暂停或者清除定时器
onError(){} => 应用的代码发生报错的时候会触发，收集用户的错误信息，通过异步请求将错误信息发送到后台去
onPageNotFound(){} => 页面找不到就会触发，应用第一次启动的时候，如果找不到第一个入口页面，才会触发，我们可以在这里做页面不存在的时候，通过js的方式来重新跳转页面，重新跳转到第二个备选首页 - 页面生命周期：page.js
onLoad(){} => 发送异步请求，初始化页面数据
onShow(){} => 页面显示
onReady(){} => 页面初次渲染
onHide(){} => 页面隐藏，页面跳转的时候会触发
onUnload(){} => 页面卸载的时候会触发，页面跳转的时候redirect或者其他会关闭当前页面的属性会触发这个生命周期
onPullDownRefresh(){} => 用户下拉页面，页面数据或者效果重新刷新
onReachBottom(){} =>用户上拉触底的时候触发，数据量足够多出现滚动条的时候，所以 当页面上下滚动才行，上拉加载下一页数据
onShareAppMessage(){} => 用户转发的时候触发
onPageScroll(){} => 页面滚动就会触发，只要一滚动就要触发, 反复触发，最好少用
onResize(){} =>页面的尺寸发生改变的时候触发，当小程序发生横屏，竖屏的时候会触发
onTabItemTap(){} => 只存在tabbar页面，只有点击tabbar才会触发
总结
这篇文章是在具备其他前端框架的基础上进行学习的，假如是完全零基础的同学，这篇文章可能介绍的还不够详细，欢迎大家积极查阅官网文档，但是也希望这篇文章可以帮助大家快速的认识小程序~
