使用Vue嵌Cordova开发总结

1. build 下无法调用 cordova

需要监听 deviceready 事件完成后再加载 vue 页面:

2. dev 下无法调用 cordova

注意 cordova 下各 plugin 是否完全加载,正常 cordova_plugins.json 应该为 404

1
2
'/cordova_plugins.json': { target: 'http://127.0.0.1:' + PORT + '/mock',
changeOrigin: true }

unofficial API for xiami

千言万语

晚安 xiami.fm

直接食用

  1. 获取专辑相关信息

[https://xplaylist.leanapp.cn/album/:id](https://xplaylist.leanapp.cn/album/:id)

id: 专辑的 StringId

  1. 获取歌单相关信息

[https://xplaylist.leanapp.cn/collect/:id?page=&pageSize=](https://xplaylist.leanapp.cn/collect/:id?page=&pageSize=)

id: 歌单的 StringId

page: 页码

pageSize: 每页条目数

  1. 获取艺人的热门歌曲信息

[https://xplaylist.leanapp.cn/artist/:id?page=&pageSize=](https://xplaylist.leanapp.cn/artist/:id?page=&pageSize=)

id: 艺人的 StringId

page: 页码

pageSize: 每页条目数

  1. 获取歌曲相关信息

[https://xplaylist.leanapp.cn/song/:id/info](https://xplaylist.leanapp.cn/song/:id/info)

id: 歌曲 id

  1. 获取歌曲相关信息

[https://xplaylist.leanapp.cn/songs/:ids/info](https://xplaylist.leanapp.cn/songs/:ids/info)

ids: 歌曲 id 列表,支持多个逗号分隔

  1. 获取歌曲音乐文件相关信息

[https://xplaylist.leanapp.cn/song/:id](https://xplaylist.leanapp.cn/song/:id)

id: 歌曲 id

  1. 获取歌曲音乐文件相关信息

[https://xplaylist.leanapp.cn/songs/:ids](https://xplaylist.leanapp.cn/songs/:ids)

ids: 歌曲 id 列表,支持多个逗号分隔

  1. 搜索

[https://xplaylist.leanapp.cn/search?key=](https://xplaylist.leanapp.cn/search?key=)

key: 关键词

备注:

请勿商业用途。

vue中修改props传进来的值浅析

众所周知,vue 是单向数据流,一般我们也不会在子组件里面修改父组件传进来的值,但总有需要修改的时候。不过值得注意的是,vue 官方不推荐直接在子组件中修改父组件传来的 props 的值。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “result” (found in component )

在子组件修改 props 的方法:

1.子组件 data 中拷贝一份,注意引用类型需要深拷贝,根据需求可以 watch 监听

1
2
data() { return { newList: this.list.slice() } }, watch: { list(newVal) {
this.newList = newVal } }

2.通过计算属性修改

1
2
computed: { nList() { return this.list.filter(item => { return item.isChecked })
} }

3.sync 修饰符

1
2
3
4
// 父组件
<todo-list :list.sync="list" />

// 子组件 methodName(index) { this.$emit('update:list', this.newList) }