小程序开发注意事项

小程序开发注意事项

小程序拆分过多引起的问题

1.0 加载速度慢

1. 当前大部分小程序都是使用沙箱测试版本，所以每次都会重新下载，等以后发正式版本之后，会根据版本去控制；
2. 小程序启动页会有延迟，默认模板已经修改。

2.0 模板更新问题

1. 当前模板已经更新过很多次版本，也修复了很多问题，但是老的项目并不能及时修复；
2. 项目不要完全的拷贝复用，尽量将拷贝功能的业务考到最新模块中使用；

3.0 移动端兼容

1. 移动端会有一些新功能，会在模板中进行兼容，如果不及时更新，可能导致无法使用功能；
2. 移动端开启应用后台运行时，官方提供的关闭方法，在小程序中是无法彻底关闭小程序的。

4.0 小程序测试

小程序基于APP原生调试问题

1. 使用 log 或者 dialog 输出文本；
2. 使用HBuilder 直接运行到手机上调试（除了传参，其他效果都一样）。

5.0 小程序应用多开

1. 需用使用最新的组件库中的finish方法关闭；
2. 目前只支持凌云小程序多开，后期会逐步放开限制。

6.0 UView升级2.0

6.1 安装

// 安装1.0
npm install uview-ui@1.8.4

//安装2.0
npm install uview-ui

6.2 配置

6.2.1 相同配置

// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)


/* uni.scss */
@import 'uview-ui/theme.scss';


//在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性
<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>


// pages.json
{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    }
}

6.2.2 不同配置

//UView2.0： vue.config.js，如没有此文件则手动在根目录创建
module.exports = {
    transpileDependencies: ['uview-ui']
}

6.3 用法不同

6.3.1 已移除

u-field、u-circle-progress、u-table、u-top-tips、u-card、u-time-line、u-waterfall、u-dropdown

6.3.2 显示变量改变

UView2.0：使用:show="show"进行显示

u-modal、u-select、 u-popup、u-calendar、u-keyboard、u-picker

//UView1.0
<u-modal v-model="show"></u-modal>

//UView2.0
<u-modal :show="show"></u-modal>

6.3.3 u-cell-item

//UView1.0
<u-cell-group>
    <u-cell-item icon="setting-fill" title="个人设置"></u-cell-item>
    <u-cell-item icon="integral-fill" title="会员等级" value="新版本"></u-cell-item>
</u-cell-group>

//UView2.0
<u-cell-group>
    <u-cell icon="setting-fill" title="个人设置"></u-cell>
    <u-cell icon="integral-fill" title="会员等级" value="新版本"></u-cell>
</u-cell-group>

6.3.4 u-input

//UView1.0
<u-input></u-input>

//UView2.0
<u--input></u--input>

6.3.5 u-form

//UView1.0
<u-form></u-form>

//UView2.0
<u--form></u--form>

6.3.6 u-verification-code

//UView1.0
<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode"     @change="codeChange"></u-verification-code>

//UView2.0
<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>

6.3.7 u-action-sheet

//UView1.0
<u-action-sheet :list="list" v-model="show"></u-action-sheet>

//UView2.0
<u-action-sheet :actions="list" :title="title" :show="show"></u-action-sheet>

6.3.8 u-alert-tips

//UView1.0
<u-alert-tips type="warning" :title="title" :description="description"></u-alert-tips>

//UView2.0
<u-alert :title="title" type = "warning" :description = "description"></u-alert>

6.3.9 u-mask

//UView1.0
<u-mask :show="show" @click="show = false"></u-mask>

//UView2.0
<u-overlay :show="show" @click="show = false"></u-overlay>

6.3.10 u-divider

//UView1.0
<u-divider color="#fa3534">长河落日圆</u-divider>

//UView2.0
<u-divider text="分割线" :hairline="true"></u-divider>