uni-app新闻小程序

最新推荐文章于 2024-12-13 16:13:11 发布

安然907

最新推荐文章于 2024-12-13 16:13:11 发布

阅读量1.6k

点赞数 1

分类专栏：笔记文章标签： uni-app 小程序 vue.js

本文链接：https://blog.csdn.net/qq_55776682/article/details/126815706

版权

本文介绍了使用uni-app框架开发微信小程序的过程，包括vue基础知识、框架搭建、界面说明、代码编写以及运行步骤。重点关注vue单文件组件、路由配置、页面跳转、内置提示以及uni-app中使用图片和rich-text组件的方法。

摘要由CSDN通过智能技术生成

一：了解vue

vue单文件组件规范sfc

<template>
	<view>
	注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。
	</view>
</template>

<script>
	export default {
	}
</script>

<style>

</style>

外部文件引用方式
js要require进来，变成了对象

<script>
var util = require('../../../common/util.js');  //require这个js模块
var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法
</script>

css外部文件导入

<style>
	@import "./common/uni.css";
	
	.uni-hello-text{
		color:#7A7E83;
	}
</style>

vue支持组件导入

<template>
	<view>
		<uni-badge text="abc" :inverted="true"></uni-badge><!--3.使用组件-->
	</view>
</template>
<script>
	import uniBadge from "../../../components/uni-badge.vue";//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
	export default {
		data() {
			return {
				
			}
		},
		components: {
			uniBadge //2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
		}
	}
</script>