如何学习uni-app?

每一帧都是褪色的自己 發表於 2019-9-16 07:44:00

<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074343045-279113584.jpg" alt="file" loading="lazy"></p>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074344134-1779585505.jpg" alt="file" loading="lazy"></p>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074344446-755990230.jpg" alt="file" loading="lazy"></p>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074345182-1126989124.jpg" alt="file" loading="lazy"></p>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074346205-879308096.jpg" alt="file" loading="lazy"></p>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074347589-504214513.jpg" alt="file" loading="lazy"></p>
<p>uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。</p>
<p>开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序、H5等多个平台，保证其正确运行并达到优秀体验。<br>
<img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074349636-785122093.jpg" alt="file" loading="lazy"></p>
<pre><code><template>
<view class="content">
</view>
</template>
<script>
export default {
data: {
}
}
</script>
</code></pre>
<pre><code>methods: {
openinfo() {
var newsid = e.currentsTarget.dataset.newsid;
uni.navigateTo({
url: '../info/info?newsid='+newsid
})
}
}
</code></pre>
<pre><code>export defaults {
onLoad: function(e){
uni.request({
url: ''+e.newsid,
method: 'GET',
data: {},
success: res => {
}
fail: () => {},
complete: () => {}
})
}
}
</code></pre>
<pre><code><template>
<view class="content">
<view class="title"></view>
</view>
</template>

<rich-text class="richTest" :nodes="strings"></rich-text>
</code></pre>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074351048-911572738.jpg" alt="file" loading="lazy"></p>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074351852-489219830.jpg" alt="file" loading="lazy"></p>
<h1 id="列表">列表</h1>
<p>返回数据格式<br>
post_id 新闻id<br>
title 标题<br>
created_at 创建时间<br>
author_avatar 图标</p>
<p>详情<br>
地址：</p>
<pre><code>https://unidemo.dcloud.net.cn/api/news/36kr/ + id
</code></pre>
<p>使用rich-text来展示新闻内容</p>
<pre><code><rich-text class="richText" :nodes="strings"></rich-text>
</code></pre>
<p>2018年，uni-app，Dcloud推出uni-app，下载了官方提供的hello示例教程</p>
<p>空白的项目要拷贝uni.css和uni.js，保存到common目录<br>
打开pages.json将文件中的navigationBarTitleText</p>
<p>v-for表示要循环的语句<br>
@tap表示绑定点击事件<br>
:data-postid表示绑定一个动态的数据<br>
而postid表示这个动态的数据属性是这个名字</p>
<p>编写js代码的时候，编译器会自动用eslint对代码进行检查<br>
onLoad是页面的生命周期</p>
<pre><code><template>
<view class="content">
<view class="uni-list">
<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in news" :key="index" @tap="opennews" :data-postid="item.post_id">
<view class="uni-media-list">
   <image class="uni-media-list-logo" :src="item.author_avatar"></image>
<view class="uni-media-list-body">
<view class="uni-media-list-text-top">{{item.title}}</view>
<view class="uni-media-list-text-bottom uni-ellipsis">{{item.created_at}}</view>
</view>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
   news: []
};
},
onLoad: function() {
uni.request({
   url: 'https://',
method: 'GET',
data: {},
success: res => {
this.news = res.data;
},
fail: () => {},
complete: () => {}
});
},
methods: {
opennews(e){
   uni.navigateTo({
url: '../news/new?postid='+e.currentTarget.dataset.postid
});
}
}
}
</script>
<style>
.uni-media-list-body{height:auto;}
.uni-media-list-text-top{line-height: 1.6em;}
</style>
</code></pre>
<pre><code><template>
<view class="wrap">
   <view class="title">
         {{title}}
   </view>
   <view class="content">
         <rich-text :nodes="content"></rich-text>
   </view>
</view>
</template>

<script>
export default {
   data() {
         return {
            title: '',
            content: ''
         };
   },
   onLoad:function(e){
         uni.request({
            url: 'https://'+ e.postid,
            method: 'GET',
            data: {},
            success: res => {
               this.title = res.data.title;
               this.content = res.data.content;
            },
            fail: () => {},
            complete: () => {}
         });
   }
}
</script>

<style>
.wrap{padding: 10upx 2%;width: 96%;flex-wrap: wrap;}
.title{line-height: 2em;font-weight: bold;font-size: 40upx;}
.content{line-height: 2em;}
</style>
</code></pre>
<p>网页大多是b/s<br>
服务端代码混合在页面里<br>
现在是c/s</p>
<pre><code><!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title></title>
   <script type="text/javascript">

   </script>
   <style type="text/css">

   </style>
</head>
<body>

</body>
</html>
</code></pre>
<pre><code><template>
<view>

</view>
</template>

<script>
export default {

}
</script>

<style>

</style>
</code></pre>
<pre><code><script>
var util = require('../../../common/util.js');//require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>
</code></pre>
<pre><code>function formatTime(time) {
return time;//这里没写逻辑
}

module.exports = {
formatTime: formatTime
}
</code></pre>
<pre><code>var dateUtils = require('../../../common/util.js').dateUtils;
import * as echarts from '/components/echarts.simple.min.js';
</code></pre>
<pre><code><style>
@import "./common/uni.css";
.uni-hello-text {
color: #7A7E83;
}
</style>
</code></pre>
<p>导入一个角标的组件库</p>
<pre><code><template>
<view>
<uni-badge text="abc" :inverted="true"></uni-badge>
</view>
</template>

<script>
import uniBadge from '../../../components/uni-badge.vue";
export default {
data() {
return {
}
},
components: {
uniBadge
}
}
</script>
</code></pre>
<pre><code>// main.js
import pageHead from './components/page-head.vue' // 导入
Vue.component('page-head', pageHead)
</code></pre>
<p>div改view</p>
<p>span, font 改 text</p>
<p>a 改成 navigator</p>
<p>img 改 image</p>
<p>input, form, button, checkbox, radio, label, textarea,canvas, video</p>
<p>select 改picker</p>
<p>iframe 改 web-view</p>
<p>scroll-view<br>
swiper<br>
icon<br>
rich-text<br>
progress<br>
slider<br>
switch<br>
camera<br>
live-player<br>
map<br>
cover-view</p>
<p>覆盖原生组件，在map上加个遮罩，则需要使用cover-view组件</p>
<p>js变化，分为运行环境变化，数据绑定模式变化，api<br>
浏览器中的js是w3c组织基于js规范补充了window、document、navigator、location等专用对象。</p>
<pre><code><html>
<head>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
   document.getElementById("spana").innerText="456"
})
function changtextvalue() {
   document.getElementById("spana").innerText="789"
}
</script>
</head>
<body>
<span id="spana">123</span>
<button type="button onclick="changetextvalue()">111</button>
</body>
</html>
</code></pre>
<pre><code><template>
<view>
<text>{{textvalue}}</text>
<button :type="buttontype" @click="changetextvalue()"></button>
</view>
</template>
<script>
export default{
data() {
return {
textvalue: "123",
buttontype: "primary"
};
},
onLoad() {
this.textvalue="456"
},
methods: {
changetextvalue() {
this.textvalue="789"
}
}
}
</script>
</code></pre>
<p>alert, confirm改成 uni.showmodel<br>
ajax 改成 uni.request</p>
<p>cookie, session,<br>
rem只能用于h5<br>
注意背景图和字体文件尽量不要大于40k。</p>
<h1 id="vue和微信小程序">vue和微信小程序</h1>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074354068-1114637938.jpg" alt="file" loading="lazy"></p>
<p>小程序生命周期<br>
<img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074355006-1759567322.jpg" alt="file" loading="lazy"></p>
<p>onLoad: 页面加载<br>
一个页面只会调用一次，在onLoad中获取打开当前也迈进所调用的query参数</p>
<p>onShow页面显示<br>
每次打开页面都会调用一次</p>
<p>onReady: 页面初次渲染完成<br>
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互</p>
<p>onHide: 页面隐藏<br>
当navigateTo或底部tab切换时调用</p>
<p>onUnload: 页面卸载<br>
当redirectTo或navigateBack的时候调用</p>
<p>vue一般会在created或者mounted中请求数据<br>
在小程序，会在onLoad或者onShow中请求数据</p>
<pre><code><img :src="imgSrc"/>
<image src="{{imgSrc}}"></image>
</code></pre>
<pre><code>VUE
<img :src="imgSrc"/>
小程序
<image src="{{imgSrc}}"></image>
</code></pre>
<pre><code><ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>

var example1 = new Vue({
el: '#example-1',
data: {
items: [
   { message: 'Foo' },
   { message: 'Bar' }
]
}
})

</code></pre>
<pre><code><ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>

var example1 = new Vue({
el: '#example-1',
data: {
items: [
   { message: 'Foo' },
   { message: 'Bar' }
]
}
})

</code></pre>
<p>显示与隐藏元素</p>
<p>vue中，使用v-if 和v-show控制元素的显示和隐藏</p>
<p>小程序中，使用wx-if和hidden控制元素的显示和隐藏</p>
<pre><code><button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>//阻止事件冒泡
</code></pre>
<pre><code><button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>//阻止事件冒泡
</code></pre>
<pre><code><div id="app">
<input v-model="reason" placeholder="填写理由" class='reason'/>
</div>

new Vue({
el: '#app',
data: {
reason:''
}
})
</code></pre>
<pre><code><div id="app">
<input v-model="reason" placeholder="填写理由" class='reason'/>
</div>

new Vue({
el: '#app',
data: {
reason:''
}
})
</code></pre>
<pre><code><div id="app">
<input v-model="reason" placeholder="填写理由" class='reason'/>
</div>

new Vue({
el: '#app',
data: {
reason:''
}
})
</code></pre>
<p>vue中，通过this.reason取值</p>
<p>小程序中，通过this.data.reason取值</p>
<pre><code><button @click="say('明天不上班')"></button>

new Vue({
el: '#app',
methods:{
say(arg){
consloe.log(arg)
}
}
})
</code></pre>
<p>通过e.currentTarget.dataset.*的方式获取</p>
<pre><code><view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
reason:''
},
toApprove(e) {
let id = e.currentTarget.dataset.id;
}
})
</code></pre>
<pre><code>//子组件 bar.vue
<template>
<div class="search-box">
<div @click="say" :title="title" class="icon-dismiss"></div>
</div>
</template>
<script>
export default{
props:{
title:{
   type:String,
   default:''
   }
}
},
methods:{
say(){
   console.log('明天不上班');
   this.$emit('helloWorld')
}
}
</script>

// 父组件 foo.vue
<template>
<div class="container">
<bar :title="title" @helloWorld="helloWorld"></bar>
</div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
return{
   title:"我是标题"
}
},
methods:{
helloWorld(){
   console.log('我接收到子组件传递的事件了')
}
},
components:{
Bar
}
</script>

</code></pre>
<pre><code>{
"component": true
}
</code></pre>
<pre><code>"usingComponents": {
"tab-bar": "../../components/tabBar/tabBar"
}

<tab-bar currentpage="index"></tab-bar>
</code></pre>
<pre><code>//子组件 bar.vue
<template>
<div class="search-box">
<div @click="say" :title="title" class="icon-dismiss"></div>
</div>
</template>
<script>
export default{
props:{
title:{
   type:String,
   default:''
   }
}
},
methods:{
say(){
   console.log('明天不上班');
   this.$emit('helloWorld')
}
}
</script>

// 父组件 foo.vue
<template>
<div class="container">
<bar :title="title" @helloWorld="helloWorld"></bar>
</div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
return{
   title:"我是标题"
}
},
methods:{
helloWorld(){
   console.log('我接收到子组件传递的事件了')
}
},
components:{
Bar
}
</script>

</code></pre>
<pre><code>//子组件 bar.vue
<template>
<div class="search-box">
<div @click="say" :title="title" class="icon-dismiss"></div>
</div>
</template>
<script>
export default{
props:{
title:{
   type:String,
   default:''
   }
}
},
methods:{
say(){
   console.log('明天不上班');
   this.$emit('helloWorld')
}
}
</script>

// 父组件 foo.vue
<template>
<div class="container">
<bar :title="title" @helloWorld="helloWorld"></bar>
</div>
</template>

<script>
import Bar from './bar.vue'
export default{
data(){
return{
   title:"我是标题"
}
},
methods:{
helloWorld(){
   console.log('我接收到子组件传递的事件了')
}
},
components:{
Bar
}
</script>

</code></pre>
<pre><code>// 父组件 foo.vue
<template>
<div class="container">
<bar :title="title"></bar>
</div>
</template>
<script>
import Bar from './bar.vue'
export default{
data(){
return{
   title:"我是标题"
}
},
components:{
Bar
}
</script>

// 子组件bar.vue
<template>
<div class="search-box">
<div :title="title" ></div>
</div>
</template>
<script>
export default{
props:{
title:{
   type:String,
   default:''
   }
}
}
</script>
</code></pre>
<pre><code>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自定义名称事件，父组件中使用
},
}

//父组件中
<bar bind:myevent="toggleToast"></bar>

// 获取子组件信息
toggleToast(e){
console.log(e.detail)
}
</code></pre>
<hr>
<p>若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。</p>
<hr>
<h2 id="请点赞因为你们的赞同鼓励是我写作的最大动力">请点赞！因为你们的赞同/鼓励是我写作的最大动力！</h2>
<h3 id="欢迎关注达叔小生的简书">欢迎关注达叔小生的简书！</h3>
<p><strong>这是一个有质量，有态度的博客</strong></p>
<p><img src="https://img2018.cnblogs.com/blog/1434670/201909/1434670-20190916074355266-1140778145.jpg" alt="博客" loading="lazy"></p>

</div>
<div id="MySignature" role="contentinfo">
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！<br><br>
来源：https://www.cnblogs.com/dashucoding/p/11525369.html

頁: [1]

琼殿技术论坛's Archiver

如何学习uni-app?