页面结构pages.json
"path" : "pages/my/index",
改为
"path" : "pages/my/my",
图片资源目录
"iconPath": "images/tabbar/home.png",
报错.png
改为
"iconPath": "static/tabbar/home.png",
template仅包含一个根view
根节点为 ,这个 下只能有一个根组件。
vue之class与style绑定
vue之class与style绑定.png
静态绑定
动态绑定
eg1:
eg2:
改为:
eg3:
{{item.dept==0?'':(item.dept==99?positionArray[5].text:positionArray[item.dept-1].text)}}
改为:
{{item.dept==0?'':(item.dept==99?positionArray[5].text:positionArray[item.dept-1].text)}}
eg4:
{{item.title}}
改为:
{{item.title}}
eg5:
{{item}}
{{orderList.sn[index]}}
¥{{orderList.data[index]}}
报错:
Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
改为:
{{item}}
{{orderList.sn[index]}}
¥{{orderList.data[index]}}
eg6:
{{item.state}}
{{item.bg_time}}
改为:
{{item.state}}
{{item.bg_time}}
value双向绑定
报错
value="{{keyword}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of
改为
循环渲染
改为
样式文件导入App.vue
export default {
onLaunch: function () {
console.log('App Launch')
},
onShow: function () {
console.log('App Show')
},
onHide: function () {
console.log('App Hide')
}
}
/*每个页面公共css */
@import 'graceUI/graceUI.css';
@import './commons/uni.css';
@import './commons/weui.css';
@import './commons/boot.css';
微信模拟器运行警告
警告
Now you can provide attr `wx:key` for a `wx:for` to improve performance.
定位
{{item.name}}
改为
{{item.name}}
pages.json文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口表现、设置多 tab 等
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#06a7e2",
"navigationBarTitleText": "uni-app",
"navigationBarTextStyle": "white"
},
改为
"globalStyle": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#06a7e2",
"navigationBarTitleText": "uni-app",
"navigationBarTextStyle": "white"
},
定义全局函数和变量的位置和语法差异
小程序:app.js
App({
// ========== 全局数据对象(整个应用程序共享) ==========
globalData: {
sessionKey: 'sess_jk',
},
token: null,
//启动
onLaunch: function () {
console.log('onLaunch');
},
clearSession: function () {
wx.removeStorageSync(this.globalData.sessionKey);
}
)}
uni-app:main.js
Vue.prototype.sessionKey = 'sess_jk';
Vue.prototype.clearSession = function () {
uni.removeStorageSync(this.sessionKey);
};
微信小程序模拟器-域名解析错误
模拟网络请求:关闭域名校验
正式网络请求:添加小程序秘钥(manifest.json)并添加为小程序开发者中的一员
App.vue中进行网络请求
问题1:网络请求无响应
var _self;
export default {
data() {
return {
token: uni.getStorageSync("TOKEN"),
};
},
methods: {
login:function(){
console.log('login');
},
setLang:function(){
console.log('setLang');
}
},
//应用生命周期:应用启动
onLaunch: function () {
_self = this;
console.log('App Launch');
if (this.token == "") {
this.login();
} else{
this.setLang();
}
},
onShow: function () {
console.log('App Show');
},
onHide: function () {
console.log('App Hide');
},
login:function(){
console.log('login');
//微信小程序端登录:调用微信login获取code
uni.login({
success:function(res){
console.log("调用微信login获取code成功:" + JSON.stringify(res));
var code = res.code;//用户登录凭证
console.log("code:" + code);
var timestamp = Date.parse(new Date());//时间戳
console.log("timestamp:" + timestamp);
uni.request({
//通过code请求服务登录验证
url: _self.siteBaseUrl + 'user/login',
method: 'GET',
data: {
code : code,
token : "login",
timestamp : timestamp,
device : "wxapp",
ver : "1.1.30"
},
success: res => {
console.log("通过code请求服务获取token" + JSON.stringify(res));
if (res.data.code == "0") {
var data = res.data.data;
var token = data.token;
uni.setStorageSync('TOKEN',token + '');
//session_key = res.data.session_key;
//openid = res.data.openid;
}else{
console.log(res.data.msg);
}
},
fail:function(){
console.log("通过code请求服务获取token登录验证失败");
},
});
},
fail:function(e){
console.log("调用微信login获取code失败:" + JSON.stringify(e));
}
});
},
setLang:function(){
console.log('setLang')
}
}
/*每个页面公共css */
@import 'graceUI/graceUI.css';
@import './commons/uni.css';
@import './commons/weui.css';
@import './commons/boot.css';
@import './commons/public.css';
原因分析:由于马虎,login()函数定义了2遍,一遍定义在methods中(自定义函数的正确定义位置),一遍定义在生命周期函数的位置。onLaunch()中调用的login()其实是methods中的login()方法。
网络通讯有响应-success.png
问题2:网络请求有响应但请求失败(偶尔)
网络通讯有响应-fail.png
原因分析:应用生命周期、网络请求(微信登录API)都具有异步性,不能确定是否按顺序且是否能执行完毕。
Now you can provide attr wx:key for a wx:for to improve performance
警告:
[WARNING] WXMLRT_$gwx:./pages/order/order.vue.wxml:view:1:2374: Now you can provide attr `wx:key` for a `wx:for` to improve performance. at app-view.js:25
{{item.title}}
改为
{{item.title}}
wxml布局无法正常显示:二分法查找语法错误的位置
wxml布局无法正常显示.png
{{item}}
解决:key属性语法错误
{{item}}
15 picker-view
eg1:
{{item.text}}
改为
eg2:
{{year}}-{{month}}
改为
{{year}}-{{month}}
条件渲染
A
B
C
Not A/B/C
微信小程序的样式、布局、组件等适配uni-app的app端和h5端
序号
miniProgram
app
h5
uni-app适配方案
方案详情
1
icon组件
√
×
拓展组件icon/ColorUI
uni-app组件使用注意中的icon图标h5端不支持
2
字体图标
×
√
若使用网络路径字体图标,网络路径必须加协议头https
同上
3
zanui顶部tab
√
×
修改tab样式(注释top:0);注意key值
也可用ColorUI实现
4
modal
×
×
拓展组件uniPopup
略
5
weui搜索条
√
×
修改搜索条样式
也可用ColorUI实现
(3)zanui顶部tab
微信小程序有赞顶部tab的使用:
{{item.title}}
.zan-tab {
height: 45px;
}
.zan-tab__bd {
width: 750rpx;
display: flex;
flex-direction: row;
border-bottom: 1rpx solid #e5e5e5;
background: #fff;
}
.zan-tab__bd--fixed {
position: fixed;
top: 0;
z-index: 2;
}
.zan-tab__item {
flex: 1;
display: inline-block;
padding: 0 10px;
line-height: 0;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
.zan-tab__title {
display: inline-block;
max-width: 100%;
height: 44px;
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
word-break: keep-all;
font-size: 14px;
color: #666;
}
.zan-tab__item--selected .zan-tab__title {
color: #06a7e2;
border-bottom: 2px solid #06a7e2;
}
uni-app中有赞顶部tab的使用:
{{item.title}}
.zan-tab {
height: 45px;
}
.zan-tab__bd {
width: 750rpx;
display: flex;
flex-direction: row;
border-bottom: 1rpx solid #e5e5e5;
background: #fff;
}
.zan-tab__bd--fixed {
position: fixed;
/* top: 0; */
z-index: 2;
}
.zan-tab__item {
flex: 1;
display: inline-block;
padding: 0 10px;
line-height: 0;
box-sizing: border-box;
overflow: hidden;
text-align: center;
}
.zan-tab__title {
display: inline-block;
max-width: 100%;
height: 44px;
line-height: 44px;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
word-break: keep-all;
font-size: 14px;
color: #666;
}
.zan-tab__item--selected .zan-tab__title {
color: #06a7e2;
border-bottom: 2px solid #06a7e2;
}
uni-app中ColorUI顶部tab的使用:
{{item.title}}
(5)weui搜索条
微信小程序weui搜索条的使用:
{{T_D.search}}
.weui-search-bar {
background-color: #06A7E2;
position: fixed;
top: 20px;
width: 100%;
z-index:90;
border-bottom: 0;
border-top:0;
}
.search-bar-scan{
line-height:30px;
width:32px;
height:30px;
}
.search-bar-scan image{
width:22px;
height:22px;
margin-top:4px;
}
.search-bar-cart{
margin-left:10px;
line-height:28px;
width:32px;
height:30px;
}
.search-bar-cart-icon image{
width:24px;
height:24px;
margin-top:2px;
}
.weui-search-bar__form{
background:#06A7E2;
color:#fff !important;
}
.scan{
position:absolute;
right:10px;
top:0;
vertical-align:middle;
}
.search-btn {
width: 50px;
height: 28px;
line-height: 28px;
margin-left: 6px;
background-color: #06a7e2;
white-space: nowrap;
color: #ffffff;
border-radius: 5px;
border:1px solid #fff;
text-align: center;
}
.search-bar-scan {
font-size:1.3rem;
color:#e6e6ea;
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
z-index:2;
}
uni-app中weui搜索条的使用:
uni-app中ColorUI搜索条的使用:
{{T_D.search}}
app端正常,h5端报错
image.png
{{item.name}}
{{item.sn}}
{{item.number}}
改为
{{item.name}}
{{item.sn}}
{{item.number}}
备注:uni-app使用vue的条件渲染时,如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 中的输入内容, 的选中状态),需要使用 :key 来指定列表中项目的唯一的标识符。如不提供:key ,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。:key 的值以两种形式提供:
使用 v-for 循环 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
使用 v-for 循环中 item 本身,这时需要 item 本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候,会校正带有 key 的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。
TypeError: Cannot read property 'split' of undefined
image.png
定位代码块:注释后编译,之后再取消注释重新编译,不再报错,so strange !
uni.redirectTo({url:'/pages/binding/binding?backpage='+backpage+'&backtype='+backtype});
20.进度条progress
progress.png
改为:
画布canvas-图表
改为
班组7天产量折线图
disable-scroll=true @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA">
@touchmove="moveLineA" @touchend="touchEndLineA">
事件绑定
(1)为兼容各端,事件需使用 v-on 或 @ 的方式绑定,请勿使用小程序端的bind 和 catch 进行事件绑定。
(2)点击事件无响应
export default {
data() {
return {
showBind : false,
}
},
methods: {
showDetail: function(e) {
var machineId = e.currentTarget.dataset.machineId,
url = '/pages/machineDetail/machineDetail?machine_id=' + machineId;
uni.navigateTo({
url: url
});
},
}
}
改为:
export default {
data() {
return {
showBind : false,
}
},
methods: {
showDetail: function(e) {
var machineId = e.currentTarget.dataset.machineId,
url = '/pages/machineDetail/machineDetail?machine_id=' + machineId;
uni.navigateTo({
url: url
});
},
}
}
折叠面板collapse
collapse.png
{{T_D.noData}}
{{T_D.moreData}}>>
改为:
{{T_D.noData}}
{{T_D.moreData}}>>
需导入
import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
弹窗popup
popup.png
改为:
需导入
import uniPopup from "@/components/uni-popup/uni-popup.vue";
25 录音
image.png
getRecorderManager:function(){
var recorderManager = uni.getRecorderManager();
},
改为
getRecorderManager:function(){
// #ifdef APP-PLUS || MP-WEIXIN
var recorderManager = uni.getRecorderManager();
// #endif
},
各平台支持情况.png