原生小程序的基础简介

小程序初识与项目新建

微信小程序（Mini Program）是一种不需要下载安装既可以使用的应用，它实现了应用”触手可及“的梦想，用户扫一扫或者搜一下便可以打开应用，今天我们简单的认识一下微信小程序的原生框架（mina）。

环境准备

1. 使用全新的邮箱注册账号，在微信小程序后台获取APPID

企业微信截图_d13170c0-8689-43d8-89ef-e7bf53d02a65.png

2. 微信开发者工具
   需要在官网上手动下载此工具，这是集齐开发，预览，调试，发布于一身的完整环境，但是它的编码体验不是太好，一般我是通过vscode+微信开发者工具一同进行编码，vscode负责敲代码，微信开发者工具负责预览~

WechatIMG1.jpeg

项目搭建的目录结构

文件夹名称	作用
styles	存放公共样式
components	存放自定义组件
lib	存放第三方库
utils	自己的工具库
request	自己的接口相关的帮助库
icons	存放图标的文件

小程序的配置文件

一个小程序会包含最基本的两种配置文件，一种是全局的app.json和页面自己的page.json,需要注意的是，配置文件中不能出现注释。

1. 全局配置app.json
   是当前小程序的全局配置，包括小程序所有页面路径，界面表现，网络超时时间，底部tab等，具体各项配置推荐查看官网。欢迎大家访问 <a href="https://developers.weixin.qq.com/miniprogram/dev/framework/config.html" target="_blank">微信小程序全局配置详解</a>。
2. 页面配置page.json
   是用来定义页面目录下的page.json这类和小程序页面相关的配置，开发者可以独立定义每个页面的一下属性，比如顶部颜色，是否允许下拉刷新等等，页面中的配置只能设置app.json中window配置项的内容，而且页面中配置项会覆盖app.json中的window中相同的配置项。

模板语法

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件，事件体统，可以构建出页面的结构。

1. 数据绑定

<!--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',
  })

2. 运算

所谓的运算就是说可以 在花括号中加入表达式
表达式： 指的是一些简单运算，数字运算，字符串拼接，逻辑运算，三元运算符
语句： 复杂的代码段【if else switch...】具体看相关代码
注意：如果花括号和引号之间有空格，将会被解析成字符串

屏幕快照 2021-05-18 下午3.55.47.png 屏幕快照 2021-05-18 下午3.57.10.png

3. 循环

1. 列表循环 wx:for="{{数组或者对象}} wx:for-item="循环项的名称" wx:for-index="循环项的索引"
2. 对象循环 wx:for="{{对象}} wx:for-item="对象的值" wx:for-index="对象的属性" "

wx:key 用来提高数组渲染的性能，它绑定的值有如下的选择

1. wx:key="唯一的值" 绑定一个普通的字符串的时候，那么这个字符串名称肯定是循环数组中的对象的唯一值
2. wx:key="this" 表示当数组是一个普通的数组比如【1，2，3，4】时，this表示循环项本身，*this必须是唯一的字符串和数组

嵌套循环，绑定的名称不要重名，小程序默认叫item，和index，所以默认只有一层循环的时候可以不用写wx:for-item="循环项的名称" wx:for-index="循环项的索引"

屏幕快照 2021-05-18 下午4.13.11.png

在循环中可以巧妙的使用block标签，它相当于占位符标签，页面渲染的时候会被移除掉，最终不会变成真正的dom元素

4. 条件渲染

可以有两种方式① wx:if ②hidden

屏幕快照 2021-05-18 下午4.18.10.png

事件绑定

小程序中的绑定事件，是通过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

创建和使用组件的步骤

1. 一般在外层components文件夹下，创建一个组件文件夹，通过右键快速创建相关的文件,假如我们创建一个tab组件

<!--自定义组件的wxml-->
<view class="tabs_content">
 <!-- 就是个占位符，父调用子组件，就传递相应的内容 -->
   <slot></slot>
 </view>

2. 在父组件的json中，声明引用组件的位置

{
 "usingComponents": {
   "Tabs": "../../components/tabs/tabs"
 }
}

3. 在父组件的wxml中引用组件

<Tabs></Tabs>

父子组件传值

父组件向子组件传递数据，通过标签属性来传递
子向父传递数据，通过事件的方式传递
具体过程：
父传子

屏幕快照 2021-05-17 下午7.42.36.png
子传父

<!-- 子组件 -->
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才会触发

总结

这篇文章是在具备其他前端框架的基础上进行学习的，假如是完全零基础的同学，这篇文章可能介绍的还不够详细，欢迎大家积极查阅官网文档，但是也希望这篇文章可以帮助大家快速的认识小程序~