首页

# 前言

最近课设要做小程序和网站两个部分，我们组小程序开发选择的是 uni-app 框架，在开始本篇开始前，你需要先花时间看看 uni-app 官方文档，在此你需要有一些前端知识：

  • html，css，js。快速入门我推荐看一下康文昌老师的视频：https://space.bilibili.com/34786453
  • vue，快速入门的话，就去看官网：https://cn.vuejs.org/guide/introduction.html

最近的话，我不会花太多时间写博客，更多的是自己学习，等之后可能会完善，或者课设阶段性总结的时候会更新，本篇会讲解一些基本的用法，其实就是在总结上面给的资源的知识，最好的教程就在官网。

关于 vue 的代码，我在代码块标注的是 html,css 或 js，因为我这个渲染插件好像还没倒腾过 vue 代码的渲染。

# 开发工具下载

直接看官网就行了：https://hx.dcloud.net.cn/Tutorial/install/windows

最后新建项目，选择默认模板，Vue3，启用 uniCloud 即可

你可以自己在顶部栏的工具 - 设置，修改自己的配置

# 项目文件介绍

  • uniCloud：如果你有发布云端的需求，就可以在该文件夹右键，选择云服务初始化向导。

  • pages：里面存放.vue 文件，一个文件对应一个界面。

  • static：存放一些静态资源，比如图片

  • unpackage：存放 uni-app 项目打包输出的文件，存有各个平台的打包文件

  • main.js：是 uni-app 项目的入口文件，主要作用是初始化 vue 实例并使用需要的插件。

  • pages.json：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等

  • uni.scss ：预置了一些常用样式变量，方便整体控制应用的风格。比如按钮颜色、边框风格。

# 下载插件

# 案例：界面跳转

首先要设置微信小程序开发工具：设置 - 安全 - 服务端口（需要打开）。在 pages 里面新增一个 vue 文件

必须要在 pages.json 中注册，大致修改一下界面：

<template>
	<view>
		<h>另一个界面</h>
	</view>
</template>

然后在 index.vue 的 methods 中加上跳转方法（方法之间要用 , 隔开）：

jump() {
    uni.navigateTo({
    	url: '../test.vue'
    });
}

在前端定义一个按钮：

<button @click="jump()">点击跳转</button>

然后就可以选择：运行 - 运行到小程序模拟器 - 微信开发者工具即可。

# 参考

https://blog.csdn.net/Jie_1997/article/details/108870618

uni-app 点击跳转页面