ユニ - アプリ

uni-app は vue 構文、vue 命令 + アプレット タグおよび API を使用します

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{
   
   {title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

パック：：：

パッケージ化されたアプリとアプレットは同じです。

ここでの証明書は会社用です。そうでない場合は、まずクラウドでテストしてください。

ページ構成を含むグローバル構成

Sass が付属しているため、最終的に自分でインストールする必要はありません

アプレットのライフサイクルは vue のライフサイクルと競合しません。

単行省略記号、複数行省略記号

 

条件付きコンパイル ディレクティブ: 相違点の解決

互換性問題に対するマルチターミナル ソリューション、MP: 小さなプログラムの終了、H5: h5 の終了

条件付きコンパイルディレクティブ

判断できること：マルチターミナル互換性の問題、html、js、cssで記述可能、多少の違いはある

<!-- 图文区域 -->
		<!-- 条件编译 -->
		<!-- #ifdef MP -->
		<rich-text :nodes="newDetail.body"></rich-text>
		<!-- #endif -->

		<!-- #ifdef H5 -->
		<rich-text v-html="newDetail.body"></rich-text>
		<!-- #endif -->
		
		<!-- #ifdef MP -->
		<view class="body" v-html="newDetail.body"></view>
		<!-- #endif -->

 Ajax リクエストの二次カプセル化:

// utils文件夹下 request.js
function ajax(url, method, data){
	return new Promise((resolve, reject)=>{
		uni.request({
			url,
			method,
			data,
			success(res) {
				resolve(res)
			}
		})
	})
}

export default ajax

// api文件夹下：index.js
import service from '../utils/request.js'

//获取新闻列表
export function news_list( payload = {} ){
	return service('https://mpapi.iynn.cn/api/v1/news','GET',payload)
}
//获取轮播图列表
export function news_host( payload = {} ){
	return service('https://mpapi.iynn.cn/api/v1/news/hot','GET',payload)
}
//获取详情
export function news_detail( payload = {} ){
	return service('https://mpapi.iynn.cn/api/v1/news/'+payload.id,'GET',payload)
}