如何学习uni-app?
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序、H5等多个平台，保证其正确运行并达到优秀体验。
methods: {
openinfo() {
var newsid = e.currentsTarget.dataset.newsid;
uni.navigateTo({
url: '../info/info?newsid=' newsid
})
}
}export defaults {
onLoad: function(e){
uni.request({
url: '' e.newsid,
method: 'GET',
data: {},
success: res => {
}
fail: () => {},
complete: () => {}
})
}
}
列表
返回数据格式post_id 新闻idtitle 标题created_at 创建时间author_avatar 图标
详情地址：
https://unidemo.dcloud.net.cn/api/news/36kr/ id使用rich-text来展示新闻内容
2018年，uni-app，Dcloud推出uni-app，下载了官方提供的hello示例教程
空白的项目要拷贝uni.css和uni.js，保存到common目录打开pages.json将文件中的navigationBarTitleText
v-for表示要循环的语句@tap表示绑定点击事件:data-postid表示绑定一个动态的数据而postid表示这个动态的数据属性是这个名字
编写js代码的时候，编译器会自动用eslint对代码进行检查onLoad是页面的生命周期
{{item.title}}
{{item.created_at}}
{{title}}
网页大多是b/s服务端代码混合在页面里现在是c/s
function formatTime(time) {
return time;//这里没写逻辑
}
module.exports = {
formatTime: formatTime
} var dateUtils = require('../../../common/util.js').dateUtils;
import * as echarts from '/components/echarts.simple.min.js';导入一个角标的组件库
// main.js
import pageHead from './components/page-head.vue' // 导入
Vue.component('page-head', pageHead)div改view
span, font 改 text
a 改成 navigator
img 改 image
input, form, button, checkbox, radio, label, textarea, canvas, video
select 改 picker
iframe 改 web-view
scroll-viewswipericonrich-textprogresssliderswitchcameralive-playermapcover-view
覆盖原生组件，在map上加个遮罩，则需要使用cover-view组件
js变化，分为运行环境变化，数据绑定模式变化，api浏览器中的js是w3c组织基于js规范补充了window、document、navigator、location等专用对象。
123
{{textvalue}}
alert, confirm改成 uni.showmodelajax 改成 uni.request
cookie, session,rem只能用于h5注意背景图和字体文件尽量不要大于40k。
vue和微信小程序
小程序生命周期
onLoad: 页面加载一个页面只会调用一次，在onLoad中获取打开当前也迈进所调用的query参数
onShow页面显示每次打开页面都会调用一次
onReady: 页面初次渲染完成一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide: 页面隐藏当navigateTo或底部tab切换时调用
onUnload: 页面卸载当redirectTo或navigateBack的时候调用
vue一般会在created或者mounted中请求数据在小程序，会在onLoad或者onShow中请求数据
![]()
VUE
![]()
小程序
-
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
-
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
显示与隐藏元素
vue中，使用v-if 和v-show控制元素的显示和隐藏
小程序中，使用wx-if和hidden控制元素的显示和隐藏
//阻止事件冒泡
//阻止事件冒泡
new Vue({
el: '#app',
data: {
reason:''
}
})
```
new Vue({el: '#app',data: {reason:''}})
new Vue({el: '#app',data: {reason:''}})
vue中，通过this.reason取值
小程序中，通过this.data.reason取值
new Vue({el: '#app',methods:{say(arg){consloe.log(arg)}}})
通过e.currentTarget.dataset.*的方式获取Page({data:{reason:''},toApprove(e) {let id = e.currentTarget.dataset.id;}})
//子组件 bar.vue
// 父组件 foo.vue
{"component": true}
"usingComponents": {"tab-bar": "../../components/tabBar/tabBar"}
//子组件 bar.vue
// 父组件 foo.vue
//子组件 bar.vue
// 父组件 foo.vue
// 父组件 foo.vue
// 子组件bar.vue
properties: {// 弹窗标题currentpage: { // 属性名type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: 'index' // 属性初始值（可选），如果未指定则会根据类型选择一个}}
//子组件中methods: {
// 传递给父组件cancelBut: function (e) {var that = this;var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象，提供给事件监听函数this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件，父组件中使用},}
//父组件中
// 获取子组件信息toggleToast(e){console.log(e.detail)}`
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达叔小生的简书！
这是一个有质量，有态度的博客
