如何学习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 新闻id
title 标题
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是页面的生命周期

网页大多是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-view
swiper
icon
rich-text
progress
slider
switch
camera
live-player
map
cover-view

覆盖原生组件，在map上加个遮罩，则需要使用cover-view组件

js变化，分为运行环境变化，数据绑定模式变化，api
浏览器中的js是w3c组织基于js规范补充了window、document、navigator、location等专用对象。

 
  
    
    
     123
     111
     

alert, confirm改成 uni.showmodel
ajax 改成 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控制元素的显示和隐藏

Add 1
Add1  //阻止事件冒泡

明天不上班
明天不上班  //阻止事件冒泡

    


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)
}

---

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达叔小生的简书！

这是一个有质量，有态度的博客