微信小程序 - 入门篇

微信小程序入门

---

全局配置

全局配置

---

window配置

window全局配置

window全局配置也属于全局pages配置的一种，是用来配置所有微信小程序页面的

---

微信组件

微信组件

常用：

view：视图容器

text：文本

icon: 图标

rich-text:富文本

button:按钮

input:输入框

checkbox:多选

checkbox-group:多选选择器

radio:单选

radio-group:单选选择器

form:表单

picker:滚动选择器

editor:富文本编辑器

…

---

微信小程序与Vue

{{ }} 双括号语法(微信小程序) -> {{ }} 插值表达式 【用法一样】

wx:if 条件判断(微信小程序) -> v-if条件判断 【用法一样】

hidden 对标 Vue的 v-show 指令 【用法一样】

wx:for 与 Vue 的 v-for 有些区别

• 对于循环的用法有些区别，Vue很明确的告诉你使用的是for…in 循环，在v-if中需要书写for…in循环，而在微信小程序中则是直接填入数组，让微信小程序在后台自己遍历操作，然后我们会隐式的给到你item以及index值

数据绑定 : 数据绑定和Vue类似，也是在页面实例下的data节点中，但是微信小程序修改数据就和Vue有些区别了。他不能直接修改，这有点React了：

      this.setData({
        canIUseGetUserProfile: true
      })

页面声明周期：

经典一张图：

---

复用性

微信小程序主打的就是体积小，所以在复用性这方面做的一定要到位

Style样式复用：

当我们创建好公共CSS之后（当然，在微信小程序提供的公共WXSS中也是可以共用样式的），在需要复用的多个样式表中可以使用 import 导入语法进行样式的导入

单个页面模板复用：

template

多个页面引用复用

import&include

对于import导入WXML语法，官方这样说：import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template

简单理解就是A是B的朋友，C是A的朋友，但是B与C没有关系（只能导入查询一层）

include 可以将目标文件除了 <template/> 以及<wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，不过我更愿意将它与<iframe>内联框架联系在一起

那么结构层的引入就可以清晰的划分开来了，import导入模板，只能使用定义好的模板结构。而include可以导入或者说复制除了模板以外的结构，相辅相成，为复用性打下了强有力的基础

共享脚本的封装与导入

WXS&request

没错，有俩种方法一种是使用 request 进行模块化导入，导出则使用 module.exports ,我们在学习Node是相信对于这些操作已经非常熟悉了

// 共享wxs脚本文件
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: 'foo',
  bar: bar,
};
module.exports.msg = "some msg";

// 导入&使用
<wxs src="./../tools.wxs" module="tools" />
<view> {{tools.msg}} </view>
<view> {{tools.bar(tools.FOO)}} </view>

request:

var bar = function (d) {
  return d;
}
module.exports = {
  FOO: 'foo',
  bar: bar,
};
module.exports.msg = "some msg";

var tools = require("./yyyy.wxs");

console.log(tools.FOO);
console.log(tools.bar("xxxx.wxs"));
console.log(tools.msg);

<wxs src="./../xxxx.wxs" module="xxxx" />

所以它们有什么区别？

笼统地来说：request可以导入其他page的wxs中拿到复杂的二次修改值得控制权，而单纯得wxs只能做一个简单的视图渲染或者简单操作,request更像一个完整的模块化封装

---

自定义Tabbar

在我们进行自定义Tabbar之前，必须要注意一个点（不注意也行，到时候微信小程序会报错的）：我们就算自定义了Tabbar也不能将配置文件中的list节点删除

"custom": true首先我们给tabbar配置这样一条指令

然后我们进入官网：下载给我们配置的tabbar：

然后将custom-tab-bar文件复制到我们的项目根目录之下，修改wxs文件中的配置路径、图标等等

接下来我们需要在每一个页面的wxs文件中判断条件并修改对应的选中项：

    onShow() {
     // 如果有这个方法并且调用getTabbar可以调用这个实例
     if(typeof this.getTabBar == 'function' && this.getTabBar()) {
        this.getTabBar().setData({
        // 第一页
          selected: 0
        })
      }
    }

嗯~入门就这些，类似swiper轮播图这类的，直接官网粘贴就好了 😎，毕竟是工具嘛

我看到这个组件了，顺便说一下：

<cover-view class="tab-bar">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

微信小程序使用这俩种覆盖在原生组件之上的视图元素，是因为他们的层级高，将覆盖一切其他元素，用在tabbar这里再合适不过了

---

组件的封装

这个我应该写到复用那块的，想到还是有些本质区别的，索性就分开写吧
首先我们在项目根目录之下创建一个名为 components 的文件夹，在components文件夹中我们就可以创建自己的组件文件夹了，在自己创建的组件文件夹之下创建一个component

现在一个组件就创建好了，我们只需要在需要使用该组件的页面的配置文件中配置该组件

{
    "usingComponents": {
        "title-text":"/components/title/title"
    }
}

然后我们就可以随意使用了：

<view>
	<title-text></title-text>
</view>

当然，如果是一个不可变数据的组件那么复用也没有什么意义，所以它还可以进行传递数据

<text>{{ title }}</text>

然后我们还需要在该组件js文件下的 properties 节点中进行声明传递过来的数据类型(这是我在学习微信小程序之前没想到的，JavaScript语言本是一门动态语言，它是没有那么多硬性要求的，没想到让微信小程序严格了一次)

    properties: {
        title:String
    }

传递数据：

<title-text title="nihaoya"></title-text>

---

路由跳转

这个路由跳转和uniapp的路由跳转不能说毫不相干，只能说一摸一样，同样也是俩种路由跳转方式，我们可以写在页面结构中，也可以写在脚本中：

写在页面视图层:

navigator组件

<navigator url="/page/home/home" open-type="switchTab">切换到指定Tab</navigator>

路由跳转

写在逻辑层：

    navTo() {
        wx.switchTab({
          url: '/pages/news/news'
        })
    }

当然，我们依旧可以使用查询字符串在路由跳转的时候进行一个数据携带传递，success,fail,complete 这些回调函数也是应有尽有

---

网络低代码

wx.request网络请求

很简单，即拿即用，低代码嘛，封装了一个ajax，路径，参数、请求头，请求方法，响应超时检测、格式规定、回调函数等等应有尽有

wx.uploadFile文件上传

wx.downloadFile文件下载

wx.connectSocket网络通讯

---

本地存储

数据缓存

---

弹窗交互

弹窗交互

---

weUI

weUI

我们直接使用npm包管理器下载：npm i weui-miniprogram

然后点击微信小程序工具按钮，构建NPM

在全局WXSS内导入该UI组件库：@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';';

最后我们在需要写入组件的页面配置文件中配置即可：

{
  "usingComponents": {
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  }
}

---

之后我们可以进行以下学习：

API

开放能力

性能优化

AI\AR技术

等等等等…