使用uni-app开发（h5、小程序、app）步骤

川长思鸟来 2023-07-18 02:41 4阅读 0赞

## uni-app介绍 ##

`uni-app` 是一个使用 [Vue.js][] 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

## 官网地址（使用文档） ##

[https://uniapp.dcloud.io/README][https_uniapp.dcloud.io_README]

这里创建小程序为例

开发工具：Hbuilder 、微信开发者工具

打开如下hbuilder首先创建一个项目，不是正真开发的项目 ，一会要用到里面的文件 ，当然这个可以作为其他组件使用参照

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70][]

接着创建要开发的项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 1][]

复制第一次创建的项目中的common到这个oa项目中 ，

![20200323170752664.png][]

将common中的uni.css引入

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 2][]

将这个oa运行到微信小程序开发工具中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 3][]

这里开发一个新闻列表页

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 4][]

index.vue代码

<template>
    	<view class="content">
    		<view class="uni-list">
    			<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index"
    			@tap="openinfo" :data-id="item.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.content}}</view>
    					</view>
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				list:[]
    			}
    		},
    		/* 页面加载成功会执行 */
    		onLoad() {
    			uni.showLoading({
    				title:'加载中...'
    			})
    			uni.request({
    				url:'https://unidemo.dcloud.net.cn/api/news',
    				method:'GET',
    				data:{},
    				success: res=>{
    					this.list=res.data;
    					uni.hideLoading()
    				},
    				complete: () => {
    					
    				},
    				complete: () => {
    					
    				}
    			})
    		},
    		methods: {
    			openinfo(e){
    				var id = e.currentTarget.dataset.id;
    				console.log(id)
    				uni.navigateTo({
    					url: '../info/info?newid='+id,
    				});
    			}
    		}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    </style>

info.vue代码

<template>
    	<view class="content">
    		<rich-text class="richtext" :nodes="content"></rich-text>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: '',
    				content: ''
    			}
    		},
    		onLoad:function(e){
    			console.log(e.newid)
    			uni.request({
    				url:'https://unidemo.dcloud.net.cn/api/news/36kr/'+e.newid,
    				method:'GET',
    				data:{},
    				success: res => {
    					console.log(res),
    					this.title=res.data.title,
    					this.content=res.data.content
    				}
    			})
    		}
    	}
    </script>
    <style>
    </style>

[Vue.js]: https://vuejs.org/
[https_uniapp.dcloud.io_README]: https://uniapp.dcloud.io/README
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70]: /images/20230528/e3251723b947465293fd4195147e7ff6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 1]: /images/20230528/16535bf45db14dcaab0658d4b61b2dd4.png
[20200323170752664.png]: /images/20230528/a1a12c82cfac4bd087af461793689fe0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 2]: /images/20230528/79fd00f8cf0b45758d926768d6bb717d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 3]: /images/20230528/5e4c23b7e1e34fce86a5df2d3a948f7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDkxNTA4_size_16_color_FFFFFF_t_70 4]: /images/20230528/6a0a89172108494c84ecd9bc1ba0c075.png