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({

// ========== 全局数据对象(整个应用程序共享) ====