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
在(编译后的)小程序目录里找到 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 项目相同,需要注意以下几点:
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"