前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • 小程序与普通web开发的区别
  • 小程序的运行环境
  • 小程序运行机制
  • JavaScript 支持情况
  • 小程序常见问题
  • app.json 未找到?
  • 开发者工具打开空白?
  • sitemap.json 未找到?
  • 怎么清除小程序缓存?
  • 微信开发者工具,自定义路径无法打开?
  • 其他
  • 开发框架
  • kbone
  • Taro
  • uni-app
  • mpvue
  • kbone常见问题
  • web 端,vue-router 单页面打开空白?
  • web 端怎么使用小程序 API?
  • 小程序端如何获取元素宽高?

这有帮助吗?

  1. Bugs

微信小程序开发

微信小程序是一种全新的连接用户与服务的方式,它提供了一个简单、高效的应用开发框架和丰富的组件及API,帮助开发者在微信中开发具有原生 APP 体验的服务。

小程序的技术底层依托于 Web 技术,和 Web 端开发相似却又不同。在 Web 中,开发者可以使用浏览器提供的 dom/bom api 来操作渲染内容,同时编写 js 脚本来执行页面逻辑;在小程序中渲染和逻辑则完全分离,开发者可以编写 js 脚本,但是无法直接调用 dom/bom api,渲染和逻辑的交互通过数据和事件来驱动,开发者可以不用再去关心渲染的细节。

小程序与普通web开发的区别

小程序的逻辑层和渲染层是分开的,逻辑层运行在 JSCore 中,并没有一个完整浏览器对象,因而缺少相关的 Dom/Bom API。这一区别导致了前端开发非常熟悉的一些库,例如 jQuery、 Zepto 等,在小程序中是无法运行的。同时 JSCore 的环境同 NodeJS 环境也是不尽相同,所以一些 NPM 的包在小程序中也是无法运行的。

Web 开发者需要面对的环境是各式各样的浏览器,PC 端需要面对 IE、Chrome、QQ 浏览器等,在移动端需要面对 Safari、Chrome 以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端,以及用于辅助开发的小程序开发者工具,小程序中三大运行环境也是有所区别的:

运行环境

逻辑层

渲染层

iOS

JavaScriptCore

WKWebView

安卓

V8

chromium定制内核

小程序开发者工具

NWJS

Chrome WebView

小程序的运行环境

微信小程序运行在多种平台上:iOS/iPadOS 微信客户端、Android 微信客户端、Windows PC 微信客户端、Mac 微信客户端、小程序硬件框架和用于调试的微信开发者工具等。

各平台脚本执行环境以及用于渲染非原生组件的环境是各不相同的:

  • 在 iOS、iPadOS 和 Mac OS 上,小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中,视图层是由 WKWebView 来渲染的,环境有 iOS 14、iPad OS 14、Mac OS 11.4 等;

  • 在 Android 上,小程序逻辑层的 javascript 代码运行在 V8 中,视图层是由基于 Mobile Chrome 内核的自研 XWeb 引擎来渲染的;

  • 在 Windows 上,小程序逻辑层 javascript 和视图层 javascript 都是用 Chrome 内核;

  • 在 开发工具上,小程序逻辑层的 javascript 代码是运行在 NW.js 中,视图层是由 Chromium Webview 来渲染的。

尽管各运行环境是十分相似的,但是还是有些许区别:

  • JavaScript 语法和 API 支持不一致:语法上开发者可以通过开启 ES6 转 ES5 的功能来规避(详情);此外,小程序基础库内置了必要的 Polyfill,来弥补 API 的差异(详情)。

  • WXSS 渲染表现不一致:尽管可以通过开启样式补全来规避大部分的问题,还是建议开发者需要在 iOS 和 Android 上分别检查小程序的真实表现。

开发者工具仅供调试使用,最终的表现以客户端为准。

小程序运行机制

小程序启动会有两种情况,一种是「冷启动」,一种是「热启动」。

  • 热启动:用户已经打开过某小程序,然后在一定时间内再次打开该小程序,此时无需重新启动,只需将后台状态的小程序切换到前台。

    如果每次打开页面都需要刷新数据,可以在生命周期 onShow 中加刷新逻辑。

  • 冷启动:用户首次打开或小程序被微信主动销毁后再次打开的情况,需要重新加载页面资源。

如果用户很久(目前是 30 分钟)没有使用小程序,或者系统资源紧张,小程序会被「销毁」,即完全终止运行。

JavaScript 支持情况

基于安全考虑,小程序中不支持动态执行 JS 代码,即:

  • 不支持使用 eval 执行 JS 代码

  • 不支持使用 new Function 创建函数

  • new Function('return this') 除外

小程序常见问题

app.json 未找到?

报错: [ app.json 文件内容错误] app.json: app.json 未找到,未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。

原因: 由于 project.config.json 文件的 miniprogramRoot 属性找不到 app.json的路径。

  • 场景一: 项目没有 app.json 文件。

    原因是你没有打包项目,也就是,没有运行 npm run dev 或者 npm run build 生成小程序的运行文件。小程序打包的文件一般在 dist 目录(具体取决于你项目的编译结果) 。

  • 场景二: 不存在 project.config.json 文件。

    小程序运行会先读取根目录下的 project.config.json 配置文件。如果项目根目录下找不到这个文件,可能是你没有打包项目,或者打包生成的 dist 目录的 project.config.json 文件没有自动复制到根目录下(可以手动复制下)。

  • 场景三:project.config.json 文件没有 miniprogramRoot 属性,或者 miniprogramRoot 指定的路径是错误的。

    miniprogramRoot 指定小程序运行的根目录,即 app.json 所在的目录。一般是 ./dist/ 或 ./dist/mp/,具体取决于你项目的编译结果。

开发者工具打开空白?

项目启动后,微信开发者工具打开页面是空白的,其原因可能是项目指定的小程序源码的目录不对。

以 taro 框架为例:

默认情况下,微信开发者工具以 project.config.json 文件的 miniprogramRoot 配置(默认:"dist/")为小程序源码目录。由于 taro 是支持多端开发的,微信小程序的源码是输出到 dist/weapp,所以微信开发者工具读取的目录是错误的。

解决方法有两种:

  • 修改 project.config.json 或者 project.private.config.json 文件的 miniprogramRoot 配置为 dist/weapp。

  • 微信开发者工具导入小程序项目时,指定为项目下的 dist/weapp 目录。

project.private.config.json 中的相同设置优先级高于 project.config.json。

开发者工具内的设置修改会优先覆盖 project.private.config.json 的内容。如在 project.private.config.json 有 appid 字段,那么在 详情-基本信息 中修改了 appid,则会优先使用开发者工具配置的 appid。

开发阶段相关的设置修改优先同步到 project.private.config.json 中,与最终编译产物有关的设置无法在 project.private.config.json 中生效。

sitemap.json 未找到?

报错: [ dist/mp/app.json 文件内容错误] dist/mp/app.json: 未找到 ["sitemapLocation"] 对应的 sitemap.json 文件。

解决: 在根目录新建一个 sitemap.json 文件:

{
  "desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
    "action": "allow",
    "page": "*"
  }]
}

或者在 build 后,dist 文件夹中的 sitemap.json 复制到 根目录下。

怎么清除小程序缓存?

  • 微信开发者工具: 微信开发者工具顶部工具栏,有【清缓存】功能。

  • 移动端:删除小程序。(如果不启效,尝试把开发版、体验版、线上版都删掉)

微信开发者工具,自定义路径无法打开?

重现场景: 在主页跳转到某页面,点击 【添加编译模式】,【自定义编译条件】面板会自动添加如下参数。其中重要的两个参数:启动页面,是 dist/mp/pages 文件夹下的页面路径;启动参数,是 type=jump&targeturl=xxx。

如图,自动添加的参数是 type=jump&targeturl=https%253A%252F%252Ftest.miniprogram.com%252Firr,但该页面打开是空白的:

原因: 是微信开发者工具,自动添加的参数 targeturl 有误。将该值解码后,得到的并不是正确的页面路径:

decodeURIComponent('https%253A%252F%252Ftest.miniprogram.com%252Firr')
// https%3A%2F%2Ftest.miniprogram.com%2Firr

解决方法: 手动 encodeURIComponent 页面路径,配置到面板中【启动参数】属性的 targeturl 参数。

encodeURIComponent('https://test.miniprogram.com/irr')
// https%3A%2F%2Ftest.miniprogram.com%2Firr

正确配置: type=jump&targeturl=https%253A%252F%252Ftest.miniprogram.com%252Firr。

扩展:

Q:已知 location.href,如何封装成对应的小程序的页面路由?

A:先找到对应的页面路径,假设是 pages/home/index,那么封装方式:/pages/home/index?type=${type}&targeturl=${encodeURIComponent(location.href)}&search=${encodeURIComponent(location.search)}&hash=${encodeURIComponent(location.hash)}。type 支持 open(新开页面)、jump(页面内跳转)和 share(分享进入),一般在配置体验版、添加工具模式等情况下使用 type=open 即可;targeturl 是经过编码的 location.href(也可以是 /test/abcde?id=123#hash 这样不带 origin 的 url,以缩减页面路由的长度,kbone 会自动取配置中的 origin 进行拼接);search 和 hash 可传可不传,如若不传,则取 targeturl 中的 search 和 hash 进行解析。

参考资料:

其他

  • 小程序中不支持 Table 标签。

  • 小程序不支持远程加载 Js、Css;

  • 服务器接口:必须是 https 协议请求,同时请求的域名需要在小程序管理平台进行配置。本地开发时,可在微信开发者工具右上角 详情 -> 本地设置 中,关闭域名校验;

  • 小程序里的所有页面必须同源;

  • 小程序不支持动态追加未声明的属性:如 vue style 的 scoped 属性;

  • 本地资源不能通过 wxss 获取;

    • background-image: 可以使用网络图片或者 base64 格式;

    background-image: url(https://www.test.com/images/test.jpg);
    background-image: url(data:image/png;base64,...);
    • 使用 image 标签。

    <image src="/images/test.png"></image>
  • 个人或海外公众号不支持 webview 内嵌h5页面。webview中内嵌的链接来源必须在业务域名内。

  • wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

开发框架

kbone 是一个致力于微信小程序和 Web 端同构的解决方案。

微信小程序的底层模型和 Web 端不同,我们想直接把 Web 端的代码挪到小程序环境内执行是不可能的。kbone 的诞生就是为了解决这个问题,它实现了一个适配器,在适配层里模拟出了浏览器环境,让 Web 端的代码可以不做什么改动便可运行在小程序里。

它有以下特性:

  • 大部分流行的前端框架都能够在 kbone 上运行,比如 Vue、React、Preact 等。

  • 支持更为完整的前端框架特性,因为 kbone 不会对框架底层进行删改(比如 Vue 中的 v-html 指令、Vue-router 插件)。

  • 提供了常用的 dom/bom API,让用户代码无需做太大改动便可从 Web 端迁移到小程序端。以于一些无法完美兼容到小程序端的 API 也提供了一些 dom/bom 扩展 API,比如:getComputedStyle、$$getBoundingClientRect 接口。

  • 可使用 kbone-ui。kbone-ui 是一个支持在 Web 端使用小程序内置组件和 weui 组件的 UI 库。

    kbone 在小程序端支持了内置组件和 weui 组件库的使用,但是这些是小程序端的特性,在 Web 端不可使用。kbone 提供了 kbone-ui 来磨平大部分的组件实现差异,方便跨端同构。

    kbone-ui 目前有两个实现版本,版本间无法兼容:

    • 1.x 版本:基于 Web Components 实现,无框架依赖,支持更完整的组件列表

    • 0.x 版本:基于 vue 实现,可通过 npm install kbone-ui@core-v0 安装。

  • 可使用 kbone-api。Kbone-API 是一个能同时支持小程序和 Web 端的多端 API 库。它有以下特征:

    • 针对基于 Kbone 的多端开发,满足在 Web 上直接使用小程序相关 API

    • 不依赖 Kbone 和 Kbone-UI,一个无依赖的小程序 API 的跨端库

    • 同时支持 promise 化和 callback 调用

Taro 是一个开放式跨端跨框架解决方案,支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。

它有如下特性:

  • 多端转换支持: Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。

  • 框架支持: 在 Taro 3 中可以使用完整的 React / Vue / Vue3 / Nerv 开发体验。

  • Taro UI: 一款基于 Taro 框架开发的多端 UI 组件库。Taro UI 特性:

    • 基于 Taro 开发 UI 组件;

    • 一套组件可以在多端适配运行(ReactNative 端暂不支持);

    • 提供友好的 API,可灵活的使用组件。

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

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

mpvue 作为小程序版本的 Vue.js,在框架 SDK 之外,完整的技术体系还包括如下设施:

  • mpvue-loader: 提供 webpack 版本的加载器

  • mpvue-webpack-target: webpack 构建目标

  • postcss-mpvue-wxss: 样式代码转换预处理工具

  • px2rpx-loader: 样式转化插件

  • mpvue-lint: 开发辅助插件,包括语法检查,内存检查等功能

注意: mpvue 已长时间未更新了,最近一次更新是2年前(当前 2021年11月)。

kbone常见问题

web 端,vue-router 单页面打开空白?

表现: vue-router 的 history 模式,在浏览览器中打开,id='app' 节点内没有内容,页面对应的 Js 没有加载。

原因: 未知

解决: 改用 hash 模式。

web 端怎么使用小程序 API?

比如,wx.showToast 是小程序端的 API,web 端无法使用。

解决: 使用 kbone-api。Kbone-API 是一个能同时支持小程序和 Web 端的多端 API 库。

import kboneAPI from 'kbone-api'
kboneAPI.showToast({ title: 'use kbone-api' })

// 或者
Vue.use(kboneAPI)
this.$api.showToast({ title: 'use kbone-api' })

小程序端如何获取元素宽高?

Dom.$$getBoundingClientRect().then((res) => {
  console.log(res.width)
  console.log(res.height)
})
上一页移动端兼容性问题概览下一页NodeJs常见问题概览

最后更新于1年前

这有帮助吗?

参考资料:

image-20211116093641336
image-20211116095124024

完整对齐 [wx

解决微信小程序报[ app.json 文件内容错误] app.json: app.json 未找到,未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。小程序app.json报错
小程序自定义路径无法打开。 #252
wechat-miniprogram / kbone—— Q&A
kbone
apis]
Taro
uni-app
mpvue