原生小程序的基础简介

2021-05-18  本文已影响0人  mm_tang

小程序初识与项目新建

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

环境准备
  1. 使用全新的邮箱注册账号，在微信小程序后台获取APPID
企业微信截图_d13170c0-8689-43d8-89ef-e7bf53d02a65.png
  1. 微信开发者工具
    需要在官网上手动下载此工具，这是集齐开发，预览，调试，发布于一身的完整环境，但是它的编码体验不是太好，一般我是通过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',
  })
  1. 运算

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

屏幕快照 2021-05-18 下午3.55.47.png 屏幕快照 2021-05-18 下午3.57.10.png
  1. 循环
  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元素

  1. 条件渲染

可以有两种方式① 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也有一些新的特性：

创建和使用组件的步骤
  1. 一般在外层components文件夹下，创建一个组件文件夹，通过右键快速创建相关的文件,假如我们创建一个tab组件
<!--自定义组件的wxml-->
<view class="tabs_content">
 <!-- 就是个占位符，父调用子组件，就传递相应的内容 -->
   <slot></slot>
 </view>
  1. 在父组件的json中，声明引用组件的位置
{
 "usingComponents": {
   "Tabs": "../../components/tabs/tabs"
 }
}
  1. 在父组件的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})
 }

小程序的生命周期

总结

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

上一篇下一篇

猜你喜欢

热点阅读