2023年7月2日发(作者：)

【微信⼩程序】开发总结⼀、array ⽐较好⽤的属性和⽅法y() ⽅法⽤来判断某个值是否为 Array。返回true和falseconcat() ⽅法将传⼊的数组或⾮数组值与原数组合并，组成⼀个新的数组并返回forEach() ⽅法对数组的每个元素执⾏⼀次提供的函数（回调函数）join() ⽅法将数组中的所有元素连接成⼀个字符串keys() ⽅法返回⼀个数组索引的迭代器map() ⽅法返回⼀个由原数组中的每个元素调⽤⼀个指定⽅法后返回值 组成的新数组pop() ⽅法删除⼀个数组中的最后的⼀个元素，并且返回这个元素push() ⽅法添加⼀个或多个元素到数组的末尾，并返回数组新的长度in 运算符⽤于检查对象是否包含某个属性，如果包含返回true，否则 false：for (var i in obj) { (obj) }with 语句⽤于操作同⼀个对象的多个属性时，提供⼀些书写的⽅便：with(obj) { name1 = 1; name2 = 2; } 等同于

1 = 1; 2 = 2;⼆、开发规范⽬录规范：组件⽂件：统⼀放在 components ⽬录下图⽚⽂件：本地图⽚⽂件放在根⽬录的 images ⽂件夹下，组件的放在组件 images下模型⽂件：项⽬模型⽂件放在根⽬录的 models ⽂件夹下wxml 规范wxml标签可以单独出现的情况，尽量单独出现，如

控制每⾏代码数量在30个字符以内，多余的代码进⾏换⾏处理合理展现分离内容，不要使⽤内联样式，如

习惯注释出其代码功能，并在其上下空出⼀⾏与其他代码进⾏区分。...//

注释......css 规范⼩程序在开发过程中布局使⽤ flex （弹性）布局，禁⽌使⽤ float 以及 vertical-align单位间距⽤

rpx，字体和边框使⽤

pxcss 命名⽤

- 作为单词分隔符注释规范，成组的 wxss 规则之间⽤块状注释/**

修改图⽚样式 **/v-image { display: flex; flex-dirextion: row; width: 100rpx; font-size: 14px;}//

设置图⽚样式.image { height: 100%;}js 规范变量名和函数名统⼀采⽤驼峰命名法js 语句⽆需以分号结束，统⼀省略分号js 中⼀致使⽤反引号

`` 或单引号

'' ，不使⽤双引号WXML、CSS、JSON 中均应使⽤双引号点击事件规范，事件函数命名⽅式为

on+ 事件名或者业务名私有函数或者属性以下划线开头表明。常量⽤

const 声明采⽤ ES6 关键字 let 定义变量，尽量不⽤ varconst a = 1; //

定义常量let imageContent = //

定义变量async onGetList() { let imageContent = 'js中使⽤单引号' ...} //

函数命名_getInfo() { return '123';} //

私有函数props传⼊值，后⾯如果需要修改的话，在data中重新命名变量前⾯添加 _ 下划线作为区分props = { list: { type: Object, default: [] }};data = { _list: [],}回调函数统⼀使⽤

Promise 函数的⽅式进⾏编写，回调成功的参数统⼀为 res，错误参数为 errlet back = new Promise((resolve,reject) => { if ( === 1) { resolve(value); } else { reject(error); }});(res => { ('成功', res);}).catch(err => { ('失败', err);});私有函数以及回调函数统⼀放在⽣命周期函数后。删除 js ⽂件中未⽤到的⽣命周期函数，保持代码的整洁。Pages({ data: { },

//每个函数之间⽤⼀个空⾏分开 onLoad(options) { },

_self() { }})数据绑定变量定义规范，所有涉及到数据绑定的变量均需在 data 中初始化。禁⽌在不定义的情况下直接 setData组件规范，组件在使⽤时命名以 “v-” 为开头的组件名，若组件名称为多个单词名拼接⽽成，采⽤ “-” 连接。触发事件规范，组件点击触发事件建议⽤冒号分隔开

externalClasses 命名规范，命名采⽤如下形式：

v-class-{name}，name 可⾃⾏定义，如：v-class-icon组件样式规范，命名必须⼼ v- 开头，不允许使⽤内联样式以及id样式

.v-container { display:flex; flex-derixtion: row; }三、知识点问答简单描述下微信⼩程序的相关⽂件类型WXML WXSS JS JSON 你是怎么封装微信⼩程序的数据请求的？将所有的接⼝放在统⼀的js⽂件中并导出在中创建封装请求数据的⽅法在⼦页岩中调⽤封闭的⽅法请求数据有哪些参数传值的⽅法页⾯元素添加

data-* 属性来传递我们需要的值，然后通过

t 或 onLoad 的

options 参数获取。data-名称不能有⼤写字母和不可以存放对象设置

id 的⽅法标识来传值，通过

获取设置 id 的值，然后通过设置全局对象的⽅法来传递数值在

navigator 中添加参数传值你使⽤过哪些⽅法，来提⾼微信⼩程序的应⽤速度？提⾼页⾯的加载速度⽤户⾏为预测减少默认data的⼤⼩组件化⽅案进⾏开发⼩程序和原⽣app哪个好？⼩程序除了拥有公众号的低开发成本、低获客成本低以及⽆需下载等优势，在服务请求延时与⽤户使⽤体验是都得到了较⼤幅度的提升，使得其能够承载很复杂的服务功能以及使⽤户获得更好的⽤户体验。简述微信⼩程序原理？微信⼩程序采⽤JavaScript、WXML、WXSS三种技术进⾏开发，从技术讲和现有的前端开发差不多，但深⼊挖掘的话却⼜有所不同。JavaScript：⾸先JavaScript的代码是运⾏在微信App中的，并不是运⾏在浏览器中，因此⼀些H5技术的应⽤，需要微信App提供对应的API⽀持，⽽这限制住了H5技术的应⽤，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不⽀持或⽀持的不是特别好。WXML：WXML微信⾃⼰基于XML语法开发的，因此开发时，只能使⽤微信提供的现有标签，HTML的标签是⽆法使⽤的。WXSS：WXSS具有CSS的⼤部分特性，但并不是所有的都⽀持，⽽且⽀持哪些，不⽀持哪些并没有详细的⽂档。微信的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页⾯更新，都需要通过对数据的更改来实现。⼩程序分为两个部分 webview 和 appService。其中webview主要⽤来展现UI，appService有来处理业务逻辑、数据及接⼝调⽤。它们在两个进程中运⾏，通过系统层 JSBridge 实现通信，实现UI的渲染、事件的处理分析下微信⼩程序的优劣势？优势：⽆需下载，通过搜索和扫⼀扫就可以打开良好的⽤户体验：打开速度快开发成本要⽐App要低安卓上可以添加到桌⾯，与原⽣App差不多为⽤户提供良好的安全保障。⼩程序的发布，微信拥有⼀套严格的审查流程，不能通过审查的⼩程序是⽆法发布到线上的劣势：限制较多。页⾯⼤⼩不能超过1M。不能打开超过5个层级的页⾯。样式单⼀。⼩程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯⽚、导航。推⼴⾯窄，不能分享朋友圈，只能通过分享给朋友，附近⼩程序推⼴。其中附近⼩程序也受到微信的限制。依托于微信，⽆法开发后台管理功能。微信⼩程序与H5的区别？第⼀条是运⾏环境的不同传统的HTML5的运⾏环境是浏览器，包括 webview，⽽微信⼩程序的运⾏环境并⾮完整的浏览器，是微信开发团队基于浏览器内核完全重构的⼀个内置解析器，针对⼩程序专门做了优化，配合⾃⼰定义的开发语⾔标准，提升了⼩程序的性能。第⼆条是开发成本的不同只在微信中运⾏，所以不⽤再去顾虑浏览器兼容性，不⽤担⼼⽣产环境中出现不可预料的奇妙BUG第三条是获取系统级权限的不同系统级权限都可以和微信⼩程序⽆缝衔接第四条便是应⽤在⽣产环境的运⾏流畅度长久以来，当HTML5应⽤⾯对复杂的业务逻辑或者丰富的页⾯交互时，它的体验总是不尽⼈意，需要不断的对项⽬优化来提升⽤户体验。但是由于微信⼩程序运⾏环境独⽴怎么解决⼩程序的异步请求问题？使⽤ Promise⼩程序的双向绑定和vue哪⾥不⼀样?⼩程度直接 的属性是不可以同步到视图的，必须要使⽤：a({ isShow: true })