祥哥的说

1、小程序里JSON配置的一些注意事项：JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。2、WXSS 样式（1）新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算

index.wxml文件 <van-uploader file-list="{{ imageFileList }}" bind:after-read="afterRead" multiple="{{true}}" max-count="3" bind:delete="imageDelete"/>index.js文件 data: { value: '', imageFileList: [ { url: 'https://i

问题1: 设置refresher-enabled无效处理：调试基础库版本记得更新设置后是微信默认的上拉刷新效果，如下：微信上拉刷新有关属性说明：refresher-default-style：默认下拉刷新三个点的颜色，默认是黑色refresher-background：刷新区域的颜色例如：refresher-default-style=“white”refresher-background=“lightgreen”bindrefresherabort: 下拉没后到刷新的触发点时，

背景： 长列表情况下，需要实现悬浮按钮，点击一键置顶方案：采用了scroll-view组件展示长列表，监听滚动距离，控制悬浮按钮的显示和隐藏，点击之后将scroll-top置为0，实现置顶。**问题：**点击悬浮按钮之后，设置scroll-top为0，置顶功能不生效解决方案：将scroll-top的值默认设置为-1，置顶时设置为0坑：直接设置为0无效，当值发生变化时，设置滚动条位置才生效代码片段： const [scrollNum, setScrollNum] = useSt

JSX限制如下：不支持动态组件不能在包含 JSX 元素的 map 循环中使用 if 表达式不能使用 Array#map 之外的方法操作 JSX 数组不能在 JSX 参数中使用匿名函数不允许在 JSX 参数(props)中传入 JSX 元素只支持class组件暂不支持在 render() 之外的方法定义 JSX不能在 JSX 参数中使用对象展开符不支持无状态组件（函数式组件）props.children只能传递不能操作设计思路仅仅将代码按照对应语法规则转换过去后，还远远不够，因为不同端

react构建小程序的转换类框架目标：一码多端类型：转换类框架大的方面分为两种 – 编译时/运行时编译时方案运行时方案编译时/运行时方案nanachiremaxraxtaro1/2taro31、nanachi（娜娜奇）：去哪儿网2、taro: 京东，taro1/2编译类型，taro3解释类型（类似微信kbone,模拟 Web 环境来对接前端生态)3、remax: 阿里蚂蚁金服4、Rax: 淘宝(业界唯一一个同时支持编译时和运行时引擎的小程序开发方案)

1、为什么要用 React 来构建小程序？react生态体系完善。自Facebook在2013年5月开源React，经历了7年多的发展，react的社区生态体系非常庞大，若是使用react来构建小程序，那么在小程序开发中可以充分利用 React 生态体系中大量的技术沉淀（比如：react-use、field-form)。更完整的 TypeScript 支持。（1）当然也可以用 TypeScript 去写现有的小程序，但是由于小程序的架构原因(在小程序中，模版层和逻辑层是分开的，分别运行

小程序运行平台逻辑层运行环境视图层运行环境iOSJavaScriptCore由 WKWebView 来渲染AndroidV8由自研 XWeb 引擎基于 Mobile Chrome 内核来渲染的开发工具NW.jsChromium Webview 来渲染PCChrome 内核Chrome 内核MacJavaScriptCore由 WKWebView 来渲染的平台差异尽管各运行环境是十分相似的，但是还是有些许区别：JavaScript...

微信小程序使用npm包1、微信小程序如何引入npm包？2、为什么使用npm包需要有构建npm的操作？官方原理介绍：首先 node_modules 目录不会参与编译、上传和打包中，所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程，在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。

纯数据字段纯数据字段是一些不用于界面渲染的 data 字段，可以用于提升页面更新性能。组件数据中的纯数据字段组件属性中的纯数据字段使用数据监听器监听纯数据字段1、组件数据中的纯数据字段纯数据字段是什么？它的作用能干嘛？怎样指定纯数据字段？（1）纯数据字段： 有些情况下，某些 data 中的字段（包括 setData 设置的字段）既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。可以指定这样的数据字段为“纯数据字段”（2）作用： 它们将仅仅被记录在 this.dat

1、组件的生命周期指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created、attached、 detached ，包含一个组件实例生命流程的最主要时间点。created触发时机：组件实例刚刚被创建好时。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。atta

官方详细内容文档：https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips/start.html方便整体了解微信小程序性能相关的内容，看下图：

1、问题背景–为什么要进行分包？新需求开发时，发现在开发者工具中编译预览时，提示超过了最大主包限制2MB。微信小程序：整个小程序所有分包大小不超过 20M单个分包/主包大小不能超过 2M支付宝、百度小程序：整个小程序所有分包大小不超过 8MB。单个分包或主包大小不能超过 2MB。2、问题处理–进行拆包主包：即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；分包：则是根据开发者的配置进行划分。（1）在app.json中通过subpackages

小程序页面的初始化分为两个部分：逻辑层初始化，视图层初始化。逻辑层初始化：载入必需的小程序代码、初始化页面 this 对象（也包括它涉及到的所有自定义组件的 this 对象）、将相关数据发送给视图层。视图层初始化：载入必需的小程序代码，然后等待逻辑层初始化完毕并接收逻辑层发送的数据，最后渲染页面。初始渲染缓存要解决什么问题，如何解决的？问题：在启动页面时，尤其是小程序冷启动、进入第一个页面时，逻辑层初始化的时间较长。在页面初始化过程中，用户将看到小程序的标准载入画面（冷启动时）或可能看到轻微的

1、双向绑定语法在 WXML 中，普通的属性的绑定是单向的。例如：<input value="{{value}}" />如果使用 this.setData({ value: ‘leaf’ }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比，WXSS 扩展的特性有：尺寸单位样式导入1、尺寸单位rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。 规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx =

小程序注册页面的两种方式1、使用 Page 构造器注册页面2、使用 Component 构造器构造页面（1）使用 Page 构造器注册页面进行注册，指定页面的初始数据、生命周期回调、事件处理函数等。生命周期：onLoad > onShow > onReady。即：页面创建时执行 > 页面出现在前台时执行 > 页面首次渲染完毕时执行//index.jsPage({ data: { text: "This is page data." }, onLoa

sitemap 配置小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。微信现已开放小程序内搜索，开发者可以通过 sitemap.json 配置，或者管理后台页面收录开关来配置其小程序页面是否允许微信索引。（1）当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发该索引时，小程序的页面将可能展示在搜索结果中。 爬虫访问小程序内页面时，会携带特定的 user-agent：mpcrawler 及场景值：1129。（2）若小程

小程序的框架：MVVM开发模式在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。例如，用户点击某个按钮的时候，JS 会记录一些状态到 JS 变量里边，同时通过 DOM API 操控 DOM 的属性或者行为，进而引起界面一些变化。当项目越来越大的时候，你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量，显然这不是一个很好的开发模式。因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简

1、运行机制不同网页开发：（1）渲染线程和脚本线程是互斥的，长时间的脚本运行可能会导致页面失去响应。（2）网页开发者可以使用到各种浏览器暴露出来的 DOM API，进行 DOM 选中和操作。小程序：（1）渲染线程和脚本线程，二者是分开的，分别运行在不同的线程中。（2）小程序的逻辑层和渲染层是分开的，逻辑层运行在 JSCore 中，并没有一个完整浏览器对象，因而缺少相关的DOM API和BOM API。这一区别导致了前端开发非常熟悉的一些库，例如 jQuery、 Zepto 等，在小程序中是无法

微信小程序的由来，经历的三个阶段1、微信的JS API当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信的JS API就逐渐成为微信中网页的事实标准。存在问题： 移动网页能力不足的问题2、JS-SDK，网页开发工具包微信发布了一整套网页开发工具包，称之为 JS-SDK，开放了拍摄、录音、语音识别、二维码、地图、支付、分享、卡券等几十个API。解决问题： ​JS-SDK 解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力。存在问题： JS