collapse 微信小程序_微信小程序转uni-app之实践问题汇总

页面结构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

, use

改为

循环渲染

改为

样式文件导入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