Uniapp学习之从零开始写一个简单的小程序demo(新建页面,通过导航切换页面,发送请求)

先把官网文档摆在这,后面会用到的
[uniapp官网文档]: https://uniapp.dcloud.net.cn/vernacular.html#

一、开发工具准备

1-1 安装HBuilder

按照官方推荐,先装一个HBuilder

下载地址:
https://www.dcloud.io/hbuilderx.html

1-2 安装微信开发者工具

如果要在微信小程序上运行,再装一个微信开发者工具

下载地址:(记得选稳定版)
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

1-3 配置

为了之后的调试,在HBuilder里配置微信开发者工具的安装路径

HBuilder-》工具-》设置-》运行配置-》小程序运行配置-》微信开发者工具路径

image-20230807175244436

在微信开发者工具中设置端口开发、不校验合法域名

微信开发者工具-》设置-》安全设置-》服务端口:打开
微信开发者工具-》详情-》本地设置-》不校验合法域名...:勾选

image-20230807175551506

image-20230807175733843

二、写代码

如果你有足够的耐心,可以先去官网把语法文档先看一遍,大致了解vue的一些基本语法,下面写起来会相对容易。

没耐心如我凭着多年前的模糊前端知识记忆直接开搞,遇到哪里不懂再去百度哪里。

2-1 新建模板项目

HBuilder-》文件-》新建-》项目-》选一个模板
  • 注意1:这里是选模板,也就是你接下来要写的项目的参照(你CV大法的来源),推荐官方提供的【Hello uni-app】,大部分你接下来要用到的组件里面都有例子。

  • 注意2:这里vue版本最好选2,头铁的我就觉得新的好,选了3。3简直太好了,它好就好在遇到问题网上一搜全是2的解决方案,根本没几个可以参考的,就靠我的铁头自己想解决方案,惨痛经历。

image-20230807180533498

2-2 新建空白项目

步骤同上,选择模板的时候选默认模板。

注意:为什么不直接在成品模板里改呢,因为你会因为一两行代码的改动遇到各种奇奇怪怪的错误,然后就失去了正确的模板可以参考。当然,你也可以再新建一个模板项目来参考,但直接在成品模板里改出一个自己的项目,就算成功了,也会存在大量冗余代码,也会存在很多“删除了会报错,留着又不知道它有什么用的代码”,不利于新人初期的学习。

个人建议:初期学习还是做加法更有利于掌握知识。

2-3 运行空白项目

运行-》运行到小程序模拟器-》运行微信开发者工具

image-20230904104600329

当日志栏出现【项目 ‘demo02’ 编译成功。前端运行日志,请另行在小程序开发工具的控制台查看。】时,就可以通过微信小程序开发工具查看你的项目了。

注:uniapp项目编译后的路径:项目根目录/unpackage/dist/dev/mp-weixin

微信小程序开发工具导入项目时就是导入这个路径

导入之后可以看到空白项目里的HBuilder图标和Hello字样

image-20230904104025433

2-4 开写

2-4-1 页面

空白项目只自带一个首页,我需要新增页面,于是在/pages目录下右键新建另外三个页面

image-20230904105521307

image-20230904105559477

建的时候勾选【在pages.json中注册】,工具就会自动修改pages.json文件,如图所示。

然后你可以手动为这些页面改名

image-20230904105853581

2-4-2 导航栏

基础页面可以通过页脚导航栏切换,这就需要新增一段配置,在刚刚的pages同级下新增"tabBar"配置

修改pages.json文件

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path" : "pages/tab1/tab1","style" :                                                                                    {"navigationBarTitleText": "页面1","enablePullDownRefresh": false}},{"path" : "pages/tab2/tab2","style" :                                                                                    {"navigationBarTitleText": "页面2","enablePullDownRefresh": false}},{"path" : "pages/tab3/tab3","style" :                                                                                    {"navigationBarTitleText": "页面3","enablePullDownRefresh": false}}
],
"tabBar": {"borderStyle": "black","backgroundColor": "#333","color": "#8F8F94","selectedColor": "#f33e54","list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/tab1/tab1","text": "页面1"},{"pagePath": "pages/tab2/tab2","text": "页面2"},{"pagePath": "pages/tab3/tab3","text": "页面3"}]
}

改完保存,自动差量编译,切到微信小程序开发工具,可以看到页面上已经出现底部导航栏的4个页面选项,并且可以通过点击切换页面

image-20230904112543426

2-4-3 发请求

按照uniapp官方文档来:

这里随便找了个开源在线请求地址,实际项目可替换为自己的项目服务地址。

注意:如果没有注册微信小程序appId,https请求是调不通的,只能发http请求

修改tab1.vue文件

<template><view><button @click="sendRequest">发请求</button></view>
</template><script>export default {data() {return {}},methods: {sendRequest(){uni.request({url: 'http://api.thecatapi.com/v1/images/search?limit=1', //示例data: {},header: {'custom-header': 'hello' //自定义请求头信息},success: (res) => {console.log(res.data);this.text = 'request success';}});}}}
</script><style></style>

点击按钮发送请求,控制台打印出返回数据:

image-20230905172805067

2-4-4 …

待补充…

有了页面,有了导航用来切换页面,能够向后端发送请求,这就算一个简陋的demo了,还想要什么功能可以直接拿起vue在此基础上开搞

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

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

相关文章

chrome插件:一个基于webpack + react的chrome 插件项目模板

项目结构 $ tree -L 1 . ├── README.md ├── node_modules # npm依赖 ├── package.json # 详细依赖 ├── pnpm-lock.yaml ├── public # 里边包含dist&#xff0c;安装的时候安装这个目录即可 ├── src …

postgre 12.11单实例安装文档

一 下载 访问https://www.postgresql.org/download/&#xff0c;点击左侧的‘source进行下载&#xff0c;一般选择bz2的安装包。 二 安装 这里安装12.11版本的postgre&#xff0c;数据目录路径为/data/server/pgdata&#xff0c;端口为5432. 2.1 安装依赖包 #安装 yum in…

linux后台开发面试题

网络 网络的字节序网络知识 tcp三次握手 各种细节 timewait状态tcp 与 udp 区别 概念 适用范围TCP四次挥手讲一下过程&#xff0c;最后一次ack如果客户端没收到怎么办&#xff0c;为什么挥手不能只有三次&#xff0c;为什么time_wait。对于socket编程&#xff0c;accept方法是…

C++信息学奥赛1171:大整数的因子

该程序是一个寻找能够整除输入数字的最小正整数的程序。下面是代码的逻辑解析&#xff1a; #include <iostream> #include <string> #include <cstring>using namespace std;int main() {string n; // 定义一个字符串变量nint fale 0; // 用于标记是否能…

Flask-SQLAlchemy 快速上手

原文地址: 在底部查看原文(阅读体验更好) 视频地址: BV1Hh4y1j7jM Flask-SQLAlchemy 是 flask 的一个拓展插件,专门添加对 SQLAlchemy 的支持(ORM,关系对象模型)。使用它可以在 flask 中使用对象直接与 SQLAlchemy 进行交互,大大简化了 SQLAlchemy 与 flask 结合使用的过…

HJ3 随机数

描述 明明生成了NN个1到500之间的随机整数。请你删去其中重复的数字&#xff0c;即相同的数字只保留一个&#xff0c;把其余相同的数去掉&#xff0c;然后再把这些数从小到大排序&#xff0c;按照排好的顺序输出。数据范围&#xff1a; 1≤n≤1000 &#xff0c;输入的数字大小…

企业形象片宣传片策划要从哪里展开

企业形象片宣传片是一种有效的营销工具&#xff0c;能够向潜在客户传达企业的核心价值观、品牌形象和产品服务。对于企业来说&#xff0c;一个成功的宣传片可以增加品牌知名度&#xff0c;提高销售额&#xff0c;并建立与客户的良好关系。然而&#xff0c;要想策划一部成功的企…

换行符转换

将\t\n、\n、多个\n\n\n...转换为\n\n。 import pandas as pd import re # 创建一个示例DataFrame data {msgText: [这是示例文本1&#xff0c;包含\t\n换行符,这是示例文本2&#xff0c;包含\n\n多个\n换行符,这是示例文本3&#xff0c;没有换行符]} df pd.DataFrame(data)…

题目:2833.距离原点最远的点

​​题目来源&#xff1a; leetcode题目&#xff0c;网址&#xff1a;2833. 距离原点最远的点 - 力扣&#xff08;LeetCode&#xff09; 解题思路&#xff1a; 遍历字符串&#xff0c;对 L&#xff0c;R 和 _ 字符计数。前两者计数结果之差的绝对值与 _ 字符的计数结果之和即为…

多语言开发(vant

参考&#xff1a;https://blog.csdn.net/qq_44649801/article/details/131878128?spm1001.2014.3001.5506 一、抛出字段对象A export default { } 二、引入汇总文件&#xff0c;&#xff08;主要的是 模块分割 汇总&#xff0c;对A 等的处理 export default { A&#xff0c;B,…

Redis RedLock算法和底层源码分析

Redlock红锁算法 官网地址&#xff1a;Distributed Locks with Redis | Redis 为什么要使用RedLock&#xff1f; 解释&#xff1a; 线程 1 首先获取锁成功&#xff0c;将键值对写入 redis 的 master 节点&#xff0c;在 redis 将该键值对同步到 slave 节点之前&#xff0c;mas…

使用 CSS 伪类的attr() 展示 tooltip

效果图: 使用场景: 使用React渲染后台返回的数据, 遍历以列表的形式展示, 可能简要字段内容需要鼠标放上去才显示的 可以借助DOM的自定义属性和CSS伪类的attr来实现 所有代码: <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-…

Navicat导入Excel数据顺序变了

项目场景&#xff1a; Navicat导入Excel数据 问题描述 从Excel表格中导入数据到数据库中。但是&#xff0c;在导入的过程中&#xff0c;我们常会发现数据顺序出现了问题&#xff0c;导致数据错位&#xff0c;给数据的处理带来了极大的麻烦。 原因分析&#xff1a; 这个问题的…

linux 在文件夹里搜索哪个文件包含一段内容

在 Linux 中&#xff0c;您可以使用 grep 命令来在文件夹里搜索包含特定内容的文件。grep 是一种强大的文本搜索工具&#xff0c;可以用于查找文件中包含特定字符串或正则表达式的行。 要在文件夹中搜索包含特定内容的文件&#xff0c;可以使用以下命令&#xff1a; grep -r …

vue2.X 中使用 echarts5.4.0实现项目进度甘特图

vue2.X 中使用 echarts5.4.0实现项目进度甘特图 效果图&#xff1a; 左侧都是名称&#xff0c;上面是时间&#xff0c;当中的内容是日志内容 组件&#xff1a; gantt.vue <template><div id"main" style"width: 100%; height: 100%"></…

【Java Web】利用Spring整合Redis,配置RedisTemplate

1. 在config中加入RedisConfig配置类 package com.nowcoder.community.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.connection.RedisConnectionFacto…

贪心算法 - 一点了解

贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 刷题或者面试的时候&#xff0c;手动模拟一下感觉可以局部最优推出整体最优&#xff0c;而且想不到反例&#xff0c;那么就试一试贪心。 贪心算法一般分为如下四步&#xff1a; 将问题分解为若干个子问题找…

Ansys Zemax | 用于照明设计中的光源

本课程提供照明系统中光源的介绍&#xff0c;作为照明系统光源的信息中心。本课是照明学习路径的第二课。在这一课中&#xff0c;将描述照明系统中的各种光源类型以及如何这些使用光源。光源是照明系统的起点和支点&#xff0c;可以说是照明设计中最关键的部分。 简介&#xff…

华为云云耀云服务器L实例评测|基于云耀云服务器部署Samba服务

本实验将使用华为云云耀云服务器L实例&#xff0c;使用CentOS 7.9系统&#xff0c;搭建部署Samba服务器&#xff0c;并在本地Windows端进行访问。 文章目录 1、samba介绍2、环境准备3、安装samba软件包4、修改smb.conf配置文件5、添加访问samba的用户6、Windows下访问Samba服务…

使用 multiprocessing 多进程处理批量数据

示例代码 import multiprocessingdef process_data(data):# 这里是处理单个数据的过程return data * 2# 待处理的数据 data [1, 2, 3, 4, 5]def normal_func():# 普通处理方式result []for obj in data:result.append(process_data(obj)return resultdef parallel_func():# …