微信小程序开发学习笔记《16》uni-app框架

news2024/11/18 4:26:55

微信小程序开发学习笔记《16》uni-app框架

博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档

一、uni-app简介

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

在这里插入图片描述

1.1 开发工具

uni-app官方推荐使用HBuilderx来开发uni-app类型的项目。主要好处:
·模板丰富
·完善的智能提示
·一键运行
当然,你依然可以根据自己的喜好,选择使用vs Code、Sublime…等自己喜欢的编辑器!
官网下载地址:https://www.dcloud.io/hbuilderx.html

1.2 新建uni-app项目

1.文件->新建->项目
在这里插入图片描述
2.填写项目信息
在这里插入图片描述
3.成功创建好的项目模板:
在这里插入图片描述
项目模板文件结构:

uni_modules:
—components:uni-app组件目录
--------comp-a. vue:可复用的a组件

pages:业务页面文件存放的目录
— index
--------index.vue:index页面

static:存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此

main.js:Vue初始化入口文件

App.vue:应用配置,用来配置小程序的全局样式、生命周期函数等

manifest.json:配置应用名称、appid、logo、版本等打包信息

pages.json:配置页面路径、页面窗口样式、tabBar、navigationBar等页面类信息

1.3 把项目运行到微信开发者工具

1.点击manifest.json,填写好微信小程序AppID
在这里插入图片描述
2.在HBuilderx中,配置“微信开发者工具”的安装路径:
在这里插入图片描述
3.在微信开发者工具中,通过设置-→安全设置面板,开启“微信开发者工具”的服务端口:

4.在HBuilderX中,点击菜单栏中的运行-〉运行到小程序模拟器–〉微信开发者工具,将当前uni-app项目编译之后,自动运行到微信开发者工具中,从而方便查看项目效果与调试:
在这里插入图片描述
重新启动需要登录HBuilder,然后重新运行一次就会自动在 微信开发工具 中新建一个对应的项目。
在这里插入图片描述

二、 使用Git管理项目(可忽略)

2.1 在项目根目录中新建.gitignore忽略文件,并配置如下:

# 忽略node_modules目录
/node_modules
/unpackage/dist

注意:
由于我们忽略了unpackage目录中仅有的dist目录,因此默认情况下,unpackage目录不会被Git追踪
此时,为了让cit能够正常追踪unpackage目录,按照惯例,我们可以在unpackage目录下创建一个叫做.gitkeep的文件进行占位

2.2 打开终端,切换到项目根目录中,运行如下的命令,初始化本地Git仓库:

git init

2.3 将所有文件都加入到暂存区:

git add .

2.4 本地提交更新:

git commit -m "init project"

2.5 把项目托管到码云

  1. 注册并激活码云账号(注册页面地址: https://gitee.com/signup )
  2. 生成并配置SSH公钥(运行ssh -t git@gitee.com 检测SSH公钥是否配置成功)
  3. 创建空白的码云仓库
  4. 把本地项目上传到码云对应的空白仓库中

以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记,如果有什么问题,烦请联系我删除。

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

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

相关文章

70.SpringMVC怎么和AJAX相互调用的?

70.SpringMVC怎么和AJAX相互调用的&#xff1f; &#xff08;1&#xff09;加入Jackson.jar&#xff08;2&#xff09;在配置文件中配置json的消息转换器.(jackson不需要该配置HttpMessageConverter&#xff09; <!‐‐它就帮我们配置了默认json映射‐‐> <mvc:anno…

NTLM||LM算法lsasswinlogon进程

来填坑了&#xff0c;这篇blog我们就来讲一下mimikatz能抓到开机的密码的原理 1.lsass&&winlogon 不知道大家有没有好奇过&#xff0c;我们每次开机输入密码之后&#xff0c;电脑又怎么知道我们是否输入正确呢&#xff1f; &#xff1a;这就要的得益于我们的两个进程…

【前后端的那些事】webrtc入门demo(代码)

文章目录 前端代码apivue界面 后端modelwebsocketconfigresource 龙年到了&#xff0c;先祝福各位龙年快乐&#xff0c;事业有成&#xff01; 最近在搞webrtc&#xff0c;想到【前后端的那些事】好久都没有更新了&#xff0c;所以打算先把最近编写的小demo发出来。 p2p webrt…

Android 移动应用开发 创建第一个Android项目

文章目录 一、创建第一个Android项目1.1 准备好Android Studio1.2 运行程序1.3 程序结构是什么app下的结构res - 子目录&#xff08;所有图片、布局、字AndroidManifest.xml 有四大组件&#xff0c;程序添加权限声明 Project下的结构 二、开发android时&#xff0c;部分库下载异…

【Dubbo源码二:Dubbo服务导出】

入口 Dubbo服务导出的入口&#xff1a;服务导出是在DubboBootstrapApplicationListener在监听到ApplicationContextEvent的ContextRefreshedEvent事件后&#xff0c;会触发dubboBootstrap.start(), 在这个方法中最后会导出Dubbo服务 DubboBootstrapApplicationListener Dub…

【北邮鲁鹏老师计算机视觉课程笔记】03 edge 边缘检测

【北邮鲁鹏老师计算机视觉课程笔记】03 1 边缘检测 有几种边缘&#xff1f; ①实体上的边缘 ②深度上的边缘 ③符号的边缘 ④阴影产生的边缘 不同任务关注的边缘不一样 2 边缘的性质 边缘在信号突变的地方 在数学上如何寻找信号突变的地方&#xff1f;导数 用近似的方法 可以…

【DDD】学习笔记-领域模型与函数范式

函数范式 REA 的 Ken Scambler 认为函数范式的主要特征为&#xff1a;模块化&#xff08;Modularity&#xff09;、抽象化&#xff08;Abstraction&#xff09;和可组合&#xff08;Composability&#xff09;&#xff0c;这三个特征可以帮助我们编写简单的程序。 通常&#…

电商网站基础布局——以小兔鲜为例

项目准备 /* base.css */ /* 內减模式 */ * {margin: 0;padding: 0;box-sizing: border-box; }/* 设置网页统一的字体大小、行高、字体系列相关属性 */ body {font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei","Hiragino Sans…

编码安全风险是什么,如何进行有效的防护

2011年6月28日晚20时左右&#xff0c;新浪微博突然爆发XSS&#xff0c;大批用户中招&#xff0c;被XSS攻击的用户点击恶意链接后并自动关注一位名为HELLOSAMY的用户&#xff0c;之后开始自动转发微博和私信好友来继续传播恶意地址。不少认证用户中招&#xff0c;也导致该XSS被更…

【深蓝学院】移动机器人运动规划--第4章 动力学约束下的运动规划--笔记

0. Outline 1. Introduction 什么是kinodynamic&#xff1f; 运动学&#xff08;Kinematics&#xff09;和动力学&#xff08;Dynamics&#xff09;都是力学的分支&#xff0c;涉及物体的运动&#xff0c;但它们研究的焦点不同。 运动学专注于描述物体的运动&#xff0c;而…

反应式编程

反应式编程 前言1 反应式编程概览2 初识 Reactor2.1 绘制反应式流图2.2 添加 Reactor 依赖 3.使用常见的反应式操作3.1 创建反应式类型3.2 组合反应式类型3.3 转换和过滤反应式流3.4 在反应式类型上执行逻辑操作 总结 前言 你有过订阅报纸或者杂志的经历吗?互联网的确从传统的…

第66讲管理员登录功能实现

项目样式初始化 放assets目录下&#xff1b; border.css charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-botto…

WWW 万维网

万维网概述 万维网 WWW (World Wide Web) 并非某种特殊的计算机网络。 万维网是一个大规模的、联机式的信息储藏所。 万维网用链接的方法能非常方便地从互联网上的一个站点访问另一个站点&#xff0c;从而主动地按需获取丰富的信息。 这种访问方式称为“链接”。 万维网是分…

线上编程答疑解惑回顾,初学编程中文编程在线屏幕共享演示

线上编程答疑解惑回顾&#xff0c;初学编程中文编程在线屏幕共享演示 一、学编程过程中有不懂的怎么办&#xff1f; 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载——常用工具下载——编…

Python入门知识点分享——(二十)继承和方法重写

今天是大年三十&#xff0c;祝大家龙年大吉&#xff0c;当然无论何时何地&#xff0c;我们都不要忘记继续学习。今天介绍的是继承和方法重写这两种面向对象编程特点。继承机制指的是&#xff0c;一个类&#xff08;我们称其为子类或派生类&#xff09;可以使用另一个类&#xf…

无心剑中译佚名《春回大地》

The Coming of Spring 春回大地 I am coming, little maiden, With the pleasant sunshine laden, With the honey for the bee, With the blossom for the tree. 我来啦&#xff0c;小姑娘 满载着欣悦的阳光 蜂儿有蜜酿 树儿有花绽放 Every little stream is bright, All …

【Leetcode】LCP 30. 魔塔游戏

文章目录 题目思路代码结果 题目 题目链接 小扣当前位于魔塔游戏第一层&#xff0c;共有 N 个房间&#xff0c;编号为 0 ~ N-1。每个房间的补血道具/怪物对于血量影响记于数组 nums&#xff0c;其中正数表示道具补血数值&#xff0c;即血量增加对应数值&#xff1b;负数表示怪…

Apache Zeppelin 整合 Spark 和 Hudi

一 环境信息 1.1 组件版本 组件版本Spark3.2.3Hudi0.14.0Zeppelin0.11.0-SNAPSHOT 1.2 环境准备 Zeppelin 整合 Spark 参考&#xff1a;Apache Zeppelin 一文打尽Hudi0.14.0编译参考&#xff1a;Hudi0.14.0 最新编译 二 整合 Spark 和 Hudi 2.1 配置 %spark.confSPARK_H…

moduleID的使用

整个平台上有很多相同的功能&#xff0c;但是需要不同的内容。例如各个模块自己的首页上有滚动新闻、有友好链接等等。为了公用这些功能&#xff0c;平台引入了moduleID的解决方案。 在前端的配置文件中&#xff0c;配置了模块号&#xff1a; 前端页面请求滚动新闻时&#xff0…

Sam Altman计划筹集5至7万亿美元;OPPO发布AI时代新功能

&#x1f989; AI新闻 &#x1f680; Sam Altman计划筹集5至7万亿美元&#xff0c;建立全球芯片帝国 摘要&#xff1a;Sam Altman宣布计划筹集5至7万亿美元来建立全球芯片帝国&#xff0c;以满足日益增长的AI基础设施需求。他已在全球寻求资金&#xff0c;包括中东土豪。此外…