ユニアプリを学ぶためにどのように？

その他 2019-09-16 09:11:21 訪問数: null

ファイル

ファイル

ファイル

ファイル

ファイル

ファイル

ユニアプリVue.jsクロスプラットフォームアプリケーションを使用して、フロントエンド開発フレームワークです。

それが正しく機能していることを確認し、優れた経験を達成するために、iOS版、Androidの、小さなマイクロチャネルプログラム、H5および他のプラットフォームにコンパイルしたコード、ユニアプリを書き込むことによって、開発者をVue.js。
ファイル

<template>
 <view class="content">
 </view>
</template>
<script>
 export default {
  data: {
  }
 }
</script>
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: () => {}
    })
 }
}
<template>
 <view class="content">
  <view class="title"></view>
</view>
</template>

<rich-text class="richTest" :nodes="strings"></rich-text>

ファイル

ファイル

リスト

戻りデータフォーマット
post_idのニュース前述のID
、タイトル、タイトル
のcreated_at作成さ
author_avatarアイコン

詳細
住所：

https://unidemo.dcloud.net.cn/api/news/36kr/ + id

表示するにはリッチテキストニュースコンテンツを使用します

<rich-text class="richText" :nodes="strings"></rich-text>

2018年、ユニアプリ、Dcloudはハロー公式が提供するチュートリアルの例をダウンロードし、UNI-アプリを起動します

空白の項目は、uni.cssとuni.jsコピー共通カタログ節約するために
、オープンpages.jsonにnavigationBarTitleTextファイルを

V-のための文がすることを約束したループ
@tapは、クリックイベントをバインド表す
：データ-postidは、動的なデータバインディングを表す
とpostidを動的データ属性が名前で表します

jsのコードを書くとき、コンパイラが自動的にeslintのでコードをチェックする
のonLoadページのライフサイクルであります

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

ページのほとんどのb / sである
ページに混入し、サーバー側のコードは
今C / Sです

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title></title>  
        <script type="text/javascript">  

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

        </style>  
    </head>  
    <body>  

    </body>  
</html>  
<template>  
    <view>  

    </view>  
</template>  

<script>  
    export default {  

    }  
</script>  

<style>  

</style>  
<script>  
var util = require('../../../common/util.js');  //require这个js模块  
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法  
</script>  
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';
<style>
 @import "./common/uni.css";
 .uni-hello-text {
  color: #7A7E83;
    }
</style>

目標角度コンポーネントライブラリの紹介

<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>
// main.js
import pageHead from './components/page-head.vue' // 导入
Vue.component('page-head', pageHead)

divの変更ビュー

スパン、フォント改テキスト

変更ナビゲーター

IMG改画像

入力、フォーム、ボタン、チェックボックス、ラジオ、ラベル、テキストエリア、キャンバス、ビデオ

改ピッカーを選択

ウェブ・ビューの変更はiframe

スクロールビュー
swiperの
アイコン
リッチテキスト
進捗
スライダー
スイッチ
カメラ
ライブプレイヤー
マップの
カバービュー

ネイティブカバーアセンブリに加え、マップ上のマスク、カバービューアセンブリを使用する必要があります

JSの変更、動作環境への変更、機種変更、APIのデータバインディング
ブラウザベースの組織のJSのJSは、W3C仕様は、ウィンドウ、ドキュメント、ナビゲーター、場所とその他の特別なオブジェクトを補完です。

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

警告、変更uni.showmodelの確認
uni.requestにAJAXを

クッキー、セッション、
REMはH5使用することができ
40Kより大きくならないように注意背景やフォントファイルを。

アプレットとマイクロチャネルVUE

ファイル

アプレットのライフサイクル
ファイル

オンロード：ロードページ
に一度だけ呼ばれるページを、クエリパラメータもオンロードで呼ばれる現在の移動を開くために取得

onShowページが表示され
、ページを開くたびに一度呼び出されます

onReady：ページのレンダリングには、最初に完了し
ますが相互作用して、ビュー層ができ、ページに代わって準備されている、ページが一度だけ呼び出されます

onHide：ページ隠し
navigateToまたは下のタブを切り替えるために呼び出さ

ONUNLOAD：ページのアンロード
redirectToまたはnavigateBackを呼び出します

VUEは、一般的に作成またはマウントされたデータ要求
アプレットがデータのonLoadまたはonShowを要求します

<img :src="imgSrc"/>
<image src="{{imgSrc}}"></image>
VUE
<img :src="imgSrc"/>
小程序
<image src="{{imgSrc}}"></image>
<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' }
    ]
  }
})

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

表示と要素を非表示

VUE、V-IF制御要素とvショーの表示と非表示

アプレット、隠された表示制御素子WX-場合に隠れ

<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>  //阻止事件冒泡
<div id="app">
    <input v-model="reason" placeholder="填写理由" class='reason'/>
</div>

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

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

new Vue({
  el: '#app',
  data: {
   reason:''
  }
})

this.reason値でVUE

this.data.reason値でアプレット

<button @click="say('明天不上班')"></button>

new Vue({
  el: '#app',
  methods:{
    say(arg){
    consloe.log(arg)
    }
  }
})

e.currentTarget.dataset。*取得する方法により、

<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
    reason:''
},
toApprove(e) {
    let id = e.currentTarget.dataset.id;
  }
})
//子组件 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>

{
  "component": true
}
"usingComponents": {
    "tab-bar": "../../components/tabBar/tabBar"
  }
    
<tab-bar currentpage="index"></tab-bar>
//子组件 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>

//子组件 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>

// 父组件 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>
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)
}

ローカルコンテンツのこの数字は（例：著作権やその他の問題への）ビットを取得しない場合は、整流のための私達に連絡してください、タイムリーにすることができ、最初の時間に処理されます。

親指ください！あなたが同意しているので/励ましは、私の文章の最大の力です！

ようこそ注意ニッチT-のジェーンの本！

これは、品質、態度のブログです

ブログ

おすすめ

転載: www.cnblogs.com/dashucoding/p/11525369.html
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com