uniapp创建小程序

news/2024/10/12 0:08:15

uniapp创建小程序

https://www.dcloud.io/

一、安装Hbuilder和对应基本操作

​ 安装Hbuilder这里就不在赘述。

(一)、插件安装:

​ 如果考虑到后续需要使用Scss,可以前往插件市场进行搜索安装,浏览器会提示我们是否需要打开对应的HbuilderX,然后进入应用进行安装。

(二)、快捷建方式修改

​ 当然其中也包括了开发工具的主题设置。

(三)、修改编辑器的基本设置

​ 通过工具中的设置,可视化配置,也可以在 Setting.json  文件中进行设置,这种配置在网上可以自行找。

(四)、新建uniapp项目

​ 通过新建-项目来的这里,选择对应的存放路径还有对应的vue版本。

(五)、目录结构

参考地址:https://uniapp.dcloud.net.cn/tutorial/project.html

│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源(如图片、视频等)的目录,注意:静态资源都应存放于此目录
├─main.js               Vue初始化入口文件
├─App.vue               应用配置,用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息,详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息,详见
(六)、把项目运行到微信开发者工具
1、填写自己对应的微信AppID:

2、在HBuilderX中,配置"微信开发者工具"的安装路径:

​ 在工具-设置中点击,提示:鼠标右击开发者工具打开文件所在位置。

3、在微信开发者工具中,通过 设置 --> 安全设置 面板,开启“微信开发者工具”的服务端口:

4、在HbuilderX中打开微信开发者工具

​ 点击菜单栏:运行 --> 运行到小程序模拟器 --> 微信开发者工具,将当前 uni-app 项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:

注意:使用对应代码的源时uniapp,不要直接在小程序中修改

比如我们需要配置小程序的project.config文件:

补充,如果微信开发者工具出现报错:routeDone with a webviewId 3 that is not the current page,把默认生成的页面内容删了

(七)、使用Git管理项目
1、首先构建忽略文件:.gitignore 参考内容:

​ 想要更为完善的可以上网去找来复用。

# 忽略依赖和打包文件
/node_modules
/unpackage/dist

注意:由于我们的 unpackage 目录中唯一的目录dist被忽略了,所以 unpackage 目录 也不会被Git追踪,所以添加一个占位文件:.gitkeep

2、初始化git

​ 怎么安装git和右击使用指令就不赘述了。

# 项目根目录
git init
3、将所有文件都添加到暂存区
git add .
4、提交修改到本地仓库
git commit -m "你的注释"
5、绑定远程仓库——gitee

​ 怎么注册码云的账号和操作不在赘述。推荐没有git基础的可以跳过或者自己找一个入门博客。

# 创建一个远程空仓库然后复制对应指令:
cd existing_git_repo		# 这里是说你自己到你的根目录
git remote add origin 你的地址	# 绑定远程仓库
git push -u origin "master"	# 推送到master分支

​ 操作完成后就可以到gitee刷新看看了。如果你自己初始化了仓库没有这个指令,把这里的地址换成你的克隆下载地址

二、开发骨架构建

(一)、tabBar

​ 构建基本主要页面并进行实现相互跳转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.ryyt.cn/news/70459.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

labelme使用方法

labelme是一款在实例分割、语义分割、目标检测等任务中的一个常用工具,本文将介绍如何使用labelme。 labelme有各种版本,包括ubuntu、windows、macOS等。关于windows版本,也可以下载其相关的exe文件https://github.com/wkentaro/labelme/releases来使用标注 一、安装labelme…

《综合与Design Compiler》笔记

《综合与Design Compiler》笔记 一直没系统的整理过DC这块的东西,这里借助一个挺好的文档《综合与Deisgn Compiler》以及我自己的经验和理解来归总一下。 1. 综合是什么 综合是使用软件的方法来设计硬件,然后将门级电路实现与优化的工作留给综合工具的一种设计方法。它是根据…

C# unsafe 快速复制数组

/// <summary>/// 复制内存/// </summary>/// <param name="dest">目标指针位置</param>/// <param name="src">源指针位置</param>/// <param name="count">字节长度</param>/// <returns&…

11.Java集合框架_Set接口

Set接口和常用方法 基本介绍无序(添加和取出的顺序不一致),没有索引。 不允许重复元素,所以最多包含一个null。 JDK API中Set接口的实现类有HashSet、LinkedHashSet和TreeSet。set接口常用方法 和List接口一样,set接口也是Collection的子接口,因此,常用方法和Collection…

罗技鼠标永久宏定义设置

背景 写程序用到最多的组合按键就是ctrl+c, ctrl+v, 而这些能不能在鼠标上实现,这样就能解放左手了(机智如我) 硬件 需要一款支持宏定义的鼠标,而罗技系列正好拥有(未收广告费),目前尝试在g102, g304, gpwer代上都可运行 思路 使用ghub软件定义宏后加载到鼠标的板载内存上遇…

SIGIR2024| RAREMed: 不放弃任何一个患者——提高对罕见病患者的药物推荐准确性

在本文中,我们针对药物推荐模型对罕见病患者推荐精度低的问题,提出了一种新的基于预训练-微调的药物推荐模型框架**RAREMed**,并提出了两个针对性的预训练任务,来提高模型对患者病情,尤其是罕见病患者病情的表示学习能力,帮助药物推荐模型提高对罕见病患者的推荐准确度,…