ZiYu Front End

English

简体中文

English

简体中文

Appearance

小程序背景： ​

小程序的出现有着明显的商业诉求，因为马太效应，一些超大流量的 App 诞生了。这些大流量 App 集成了许多功能，但显然公司再多员工，也无法所有功能全是自己弄，于是产生小程序这种“外包”的手段。

小程序是国内前端技术的一次厚积薄发：底层运行的迷你 React 的虚拟 DOM， 内置组件是使用 Web Component，API 来源于 Hybird 的桥方法，打包使用 webpack，调试台是 Chrome console 的简化版， WXML、WXSS 的语法高亮也应该是 webpack 或 VS Code 的插件， 模块机制是 Node.js 的 CommonJS……其中最值得一提的是微信开发者工具，以后开发者工具成了各种小程序/快应用的标配。

但微信小程序一开始的复用能力非常弱，没有类继承，不能使用 npm, 不支持 Less、Sass， 因此基于它的转译框架就应运而生。第一代译转框架是 wept、WePY、mpvue，它们无一例外是 Vue 风格的。因为 WXML 的模板指令与 Vue 非常相似，只是改一下就能兼容

第一代转译框架主要是基于 Template 标签实现组件机制，自定义组件机制是很后的事了,第二代转译框架是大公司主导的，因为需要兼容的小程序越来越多，百度、支付宝、字节跳动、小米、华为等公司都推出自己的小程序和快应用。个人开发者很难凭个人力量去开发转译框架，这时候各大团队纷纷推出自己的轮子：如京东的 Taro、滴滴的 Chameleon 网易的 Megalo、去哪儿网的 nanachi、百度的 Okam 等。

国外谷歌发布了 Flutter 跨平台转译框架，但是它的编写语言是 Dart，它也无法跨界到小程序中。

微信小程序介绍 ​

小程序的注意事项 ​

  1. 不能使用 html 标签 例如：div span 需要换成小程序内置组件 View Text
  2. 不能使用 DOM BOM 相关 api， 以及操作 DOM 相关的 JQuery
  3. 可以使用 css: flex
  4. js 遵循 CommonJs 规范
  5. 公众号的邮箱不能在小程序中再注册了

小程序的渲染逻辑 ​

  1. 基于操作系统环境（android、ios）上的微信客户端来运行的
  2. 渲染层
    • 渲染内容和样式
  3. 逻辑层 （运行环境）
    • android --- V8（引擎）+ chromium 定制内核
    • ios ---- JSCore + WK webView（渲染引擎）

微信小程序目录结构 ​

  1. 小程序每个页面都有 .js(数据绑定) .json（配置） .wxml（组件+条件渲染） .wxss（页面样式） 模版文件
  2. app.js（入口文件） app.json（全局配置） app.wxss （全局样式）
  3. 生成页面
    • 只需要在 app.json -> pages 数组中添加路径就行了
    • pages 中的顺序就是页面的加载顺序，可以自定义首页
  4. 配置 tabBar

生命周期 ​

  1. 全局生命周期 app.js

    • onLaunch （启动时调用，只调用一次）
    • onShow (初始化完成 或者 从后台切换到前台)
    • onHide （从前台切换到后台）

  2. 页面的生命周期

    • onLoad (页面加载 （一次 ) (init 完成）
    • onShow （页面显示）比 ready 先执行（因为 show 中可能需要调用数据接口，拿数据，再呈现）
    • onReady (页面就绪 （一次) （获取到 init data, 并且 render 完成)
    • onHide (页面隐藏)
    • onUnload （页面卸载）

  3. 云 API

    • 以 wx. 开头的一些方法调用 叫 云 API

DCloud ​

  1. HBuilderX：这是一款集成开发环境（IDE），专门用于 HTML5 开发。它支持多种前端框架和技术，如 Vue.js、React 等。开发者可以使用 HBuilderX 构建跨平台的移动应用、Web 应用和桌面应用。

  2. DCloud 移动开发平台：这是一个全面的移动应用开发解决方案，包括了开发、测试、部署和管理移动应用的整个生命周期。它提供了丰富的组件和插件，帮助开发者加快应用开发进程。

技术分支 ​

  1. uniAPP：uni-app 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

  2. uniAPP X：uni-app x，是一个跨平台应用开发引擎，用 uts 和 uview 渲染引擎，可编译成（IOS、Android、WEB），暂时不支持小程序

  3. uniCloud：uniCloud 是 DCloud 公司提供的云服务平台，为开发者提供了一整套的云端支持和解决方案，包括云数据库、云存储、云函数等，用于支持 Uni-app 等移动应用的开发和部署。

  4. H5+：H5+是一个移动应用开发框架，专注于基于 HTML5 技术的移动应用开发，提供了丰富的原生功能支持和插件，可以帮助开发者构建功能丰富的移动应用。

  5. wap2APP：wap2APP 可能是指将传统的网页（WAP）转换为移动应用程序（App）的过程或工具，以提高用户体验和访问便捷性。

Hbuildx ​

规范设置

UniApp ​

HbuildX 项目转 Cli 项目 ​

  1. 使用 cli 创建项目
js
vue create -p dcloudio/uni-preset-vue my-project

  1. 将原有项目的所有文件复制到新项目的 src文件夹中,删除 src 中 package.json

  2. 安装less、less-loader ， sass 、sass-loader及项目的第三方包

web 端常见问题 ​

动态设置服务器地址 ​

自定义模板

  1. 在 static 中添加 env.js
js
(function (e) {
  e.BASE_URL = "http://localhost:9401";
  e.BASE_URL_IMG = "http://localhost:9401/business/files/";
  e.BASE_MQTT_URL = "ws://localhost:9401/mqtt/";
})(window);
  1. 在模板中添加 <script src="/static/env.js"></script>
  2. 修改代码中 BaseURL = window.BASE_URL

修改默认打包 h5 目录 ​

js
"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/jssxxx vue-cli-service uni-build",

包安全问题 ​

关于 android 应用在手机安装提示存在风险问题的解决方案

UI 框架 ​

内置组件 ​

uni-ui ​

UView ​

测试中

Q&A ​

[什么是 easycom] (https://uniapp.dcloud.net.cn/collocation/pages.html#easycom)

  • 传统 vue 组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom 将其精简为一步。
  • 内部做到，组件库批量安装，随意使用，自动按需打包。
  • UNI 常用的全局变量

  • UNI_PLATFORM：这个环境变量用于判断当前的编译平台，例如 h5、app-plus、mp-weixin 等

  • UNI_OUTPUT_DIR：这个环境变量用于设置项目的输出目录

  • UNI_ENV：这个环境变量用于区分不同的环境，例如开发环境和生产环境

  • UNI_CLI_CONTEXT：这个环境变量用于获取当前的命令行上下文

  • VUE_APP_ENV：这个环境变量用于区分环境。

  • NODE_ENV：webpack 内部使用

nvue和vue 的区别： ​

  1. 渲染方式：vue文件使用的是webview渲染，而nvue使用的是weex方式的原生渲染

  2. 性能：nvue页面相比于vue页面，具有更好的性能表现，因为nvue页面是原生渲染

  3. CSS 支持：nvue的 CSS 写法受限，只能使用flex布局，不支持其他布局方式 此外，nvue的 CSS 选择器支持的较少，只能使用class选择器 。

  4. 控制显隐：nvue页面控制显隐只可以使用v-if，不可以使用v-show。

  5. 组件使用：nvue页面中的文字内容，必须、只能在<text>组件下 。

  6. 布局：nvue页面的布局排列方向默认为竖排（column），如需改变布局方向，可以在manifest.json -> app-plus -> nvue -> flex-direction节点下修改 。

  7. 全局变量：在App.vue中定义的全局 js 变量不会在nvue页面生效 。

uni-app x 介绍 ​

uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎。

uni-app x 是一个庞大的工程，它包括 uts 语言、uvue 渲染引擎、uni 的组件和 API、以及扩展机制。

uts 是一门类 ts 的、跨平台的、新语言。uts 在 iOS 端编译为 swift、在 Android 端编译为 kotlin、在 Web 端编译为 js。

uts 语言 ​

uts 全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。它在不同平台，会被编译为不同平台的 native 语言

uvue 渲染引擎 ​

uts 替代的是 js，而 uvue 替代的就是 html 和 css。或者如果你了解 flutter 的话，也可以理解为 uts 类似 dart，而 uvue 类似 flutter。

uvue 是一套基于 uts 的、兼容 vue 语法的、跨平台的、原生渲染引擎。

渲染层问题