原生微信小程序和uni-app有什么区别?

1,409 阅读2分钟

1、小程序不允许引用和显示本地图片,允许远程图片或base64

 uni-app编译过程中会把小于40kb的图片转换成base64的形式,使小程序能够显示

2、uni-app 不支持事件的.stop/.prevent 修饰符,

解决: 使用原生方法
smallclick(event) {  
    event.stopPropagation();  
    console.log('small click');  
}

3、uni-app 开发小程序可以设置自定义导航栏,以便于修改顶栏样式(加背景图之类..)

步骤一、pages.json里面设置

    "globalStyle": {
            "navigationStyle": "custom"
            …
    }

步骤二、自定义一个pageHeader.vue 组件在每个页面引入使用,可以在main.js里面作为全局组件引入

import PageHeader from '@/components/common/PageHeader.vue'

Vue.component('PageHeader',PageHeader)

4.解决warning

image.png

在(编译后的)小程序目录里找到 project.config.json,找到 setting 配置对象,将 checkSiteMap 设置为 false ,最后保存重启开发者工具即可。

"setting": { "checkSiteMap": false }

5.小程序父组件使用 v-model 配合子组件进行组件数据的双向绑定无效

model: {
    prop: 'value',
    event: 'change'
},

6.小程序请求的域名白名单必须为https,本地开发可跳过校验

7.微信小程序端不支持多图同时上传,一次只能上传一张

解决:遍历图片数组,然后逐个上传

跨平台兼容解决方案: 1、要么写一套每个平台都兼容的方法; 2、要么使用条件编译,为不兼容的平台写特定的方法

8. uni-app不支持vue的自定义指令 directive

sad :(

9.App.vue里不能注册全局组件,可以使用vue-template-compiler

步骤一、添加vue.config.js文件,配置如下,把需要插入的组件挂载到每一个pages下的文件里面

module.exports = {
    chainWebpack: config => {
        config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
            const compile = options.compiler.compile
            options.compiler.compile = (template, ...args) => {
                if (args[0].resourcePath.match(/^pages/)) {
                        template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
                        <auth-dialog ref="AuthDialog"></auth-dialog>
                        `)
                }
                return compile(template, ...args)
            }
            return options
        })
    }
}

步骤二: 需配合easycom,在pages.json里添加配置,让uni-app自动帮页面引入组件

"easycom": {
    "autoscan": true,
    "custom": {
            "auth-dialog": "@/components/common/AuthDialog.vue"
    }
}

步骤三、如此每个页面要调用该组件的方法的时候只要使用

this.$refs.AuthDialog.[method]() 

10.打包文件不能超过2M,超过则无法上传

11.npm引入微信jssdk

npm i -S weixin-js-sdk

组件里面:

import wx from 'weixin-js-sdk'

12.使用webview的时候的通信方式

• url的query传参

13.uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

www.jianshu.com/p/17f740f9a…

14.原生小程序组件不能读取app.wxss里面的样式,需要单独在组件的wxss文件import

15. web-view

承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用

16.uni-app 编译h5,后端获取不到上传的文件

uni.uploadFile({
    url: API_HOST + '/api/upload/image',
    header: {
            // "Content-Type": "multipart/form-data",
            [TOKENNAME]: 'Bearer ' + token
    },
})

解决:不要设置header的"Content-Type"