【⼩程序】开发总结⼀、array ⽐较好⽤的属性和⽅法
array.isArray() ⽅法⽤来判断某个值是否为 Array。返回true和false
concat() ⽅法将传⼊的数组或⾮数组值与原数组合并，组成⼀个新的数组并返回
forEach() ⽅法对数组的每个元素执⾏⼀次提供的函数（回调函数）
join() ⽅法将数组中的所有元素连接成⼀个字符串
keys() ⽅法返回⼀个数组索引的迭代器
原生安卓app开发map() ⽅法返回⼀个由原数组中的每个元素调⽤⼀个指定⽅法后返回值 组成的新数组
pop() ⽅法删除⼀个数组中的最后的⼀个元素，并且返回这个元素
push() ⽅法添加⼀个或多个元素到数组的末尾，并返回数组新的长度
in 运算符⽤于检查对象是否包含某个属性，如果包含返回true，否则 false：
for (var i in obj) { console.log(obj) }
with 语句⽤于操作同⼀个对象的多个属性时，提供⼀些书写的⽅便：
with(obj) { name1 = 1; name2 = 2; } 等同于 obj.name1 = 1; obj.name2 = 2;
⼆、开发规范
⽬录规范：
组件⽂件：统⼀放在 components ⽬录下
图⽚⽂件：本地图⽚⽂件放在根⽬录的 images ⽂件夹下，组件的放在组件 images下模型⽂件：项⽬模型⽂件放在根⽬录的 models ⽂件夹下
wxml 规范
wxml标签可以单独出现的情况，尽量单独出现，如 <input />
控制每⾏代码数量在30个字符以内，多余的代码进⾏换⾏处理
合理展现分离内容，不要使⽤内联样式，如 <image class="tag"></image>习惯注释出其代码功能，并在其上下空出⼀⾏与其他代码进⾏区分。
<view>...</view>
// 注释
<view>...</view>
<view>...</view>
css 规范
⼩程序在开发过程中布局使⽤ flex （弹性）布局，禁⽌使⽤ float 以及 vertical-align 单位间距⽤ rpx，字体和边框使⽤ px
css 命名⽤ - 作为单词分隔符
注释规范，成组的 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 定义变量，尽量不⽤ var
const a =1;// 定义常量
let imageContent = res.data // 定义变量
async onGetList(){
let imageContent ='js中使⽤单引号'
...
}// 函数命名
_getInfo(){
return'123';
}// 私有函数
props传⼊值，后⾯如果需要修改的话，在data中重新命名变量前⾯添加 _ 下划线作为区分
props ={
list:{
type: Object,
default:[]
}
};
data ={
_list:[],
}
回调函数统⼀使⽤ Promise 函数的⽅式进⾏编写，回调成功的参数统⼀为 res，错误参数为 err
let back =new Promise((resolve,reject)=>{
de ===1){
resolve(value);
}else{
reject(error);
}
});
back.then(res =>{
console.log('成功', res);
}).catch(err =>{
console.log('失败', err);
});
私有函数以及回调函数统⼀放在⽣命周期函数后。删除 js ⽂件中未⽤到的⽣命周期函数，保持代码的整洁。
Pages({
data:{
},
//每个函数之间⽤⼀个空⾏分开
onLoad(options){
},
_self(){
}
})
数据绑定变量定义规范，所有涉及到数据绑定的变量均需在 data 中初始化。禁⽌在不定义的情况下直接 setData
组件规范，组件在使⽤时命名以 “v-” 为开头的组件名，若组件名称为多个单词名拼接⽽成，采⽤ “-” 连接。
触发事件规范，组件点击触发事件建议⽤冒号分隔开 <v-component-tag-name bind:myevent="onMyEvent" />
externalClasses 命名规范，命名采⽤如下形式： v-class-{name}，name 可⾃⾏定义，如：v-class-icon
组件样式规范，命名必须⼼ v- 开头，不允许使⽤内联样式以及id样式 .v-container { display:flex; flex-derixtion: row; }
三、知识点问答
简单描述下⼩程序的相关⽂件类型
WXML WXSS JS JSON app.json app.js
你是怎么封装⼩程序的数据请求的？
将所有的接⼝放在统⼀的js⽂件中并导出
在app.js中创建封装请求数据的⽅法
在⼦页岩中调⽤封闭的⽅法请求数据
有哪些参数传值的⽅法
页⾯元素添加 data-* 属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或 onLoad 的 options 参数获取。data-名称不能有⼤写字母和不可以存放对象
设置 id 的⽅法标识来传值，通过 e.currentTarget.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哪⾥不⼀样?
⼩程度直接 this.data 的属性是不可以同步到视图的，必须要使⽤：this.setData({ isShow: true })

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。