使用uniapp开发小程序(基础篇)

本文章只介绍微信小程序的开发流程,如果需要了解其他平台的开发的流程的话,后续根据情况更新相应的文章,也可以根据uniapp官网的链接了解不同平台的开发流程

HBuilderX使用:https://uniapp.dcloud.net.cn/quickstart-hx.html

开发工具

开始之前,开发者需先下载安装如下工具:

HBuilderX:官方IDE下载地址

微信开发者工具:官方下载地址

这里的前提是已安装nodejs,如果没有安装请安装。因为需要本地运行js文件

node安装:可以直接在官方下载地址安装 (不建议) 官方下载地址

使用nvm进行node版本管理安装 (个人建议) 官方下载Github地址

可以切换node版本,可能开发过程中会出现某一些库在一些node版本中不兼容,切换系统node版本方便

nvm version # 查看 nvm 版本,version 可简写成 小v
nvm v # 显示 node 是运行在 32 位还是 64 位
nvm on # 开启 node.js 版本管理
nvm off # 关闭 node.js 版本管理
nvm arch
nvm ls                # 查看版本安装所有版本
nvm ls-remote         # 查看远程所有的 Node.js 版本
nvm install 17.0.0    # 安装指定的 Node.js 版本
nvm use 17.0.0        # 使用指定的 Node.js 版本
nvm alias default 17.0.0  # 设置默认 Node.js 版本
nvm alias dev 17.0.0  # 设置指定版本的别名,如将 17.0.0 版本别名设置为 dev
nvm uninstall [version]  # 卸载指定版本 node
nvm use [version] # 使用指定版本 node

修改nvm的镜像源地址

问题:为什么要配置镜像?
答:配置完国内的镜像后,npm install xxx 的下载速度会很快!

在 nvm 的安装路径下,找到 settings.txt,在后面加上这两行,设置国内淘宝镜像源:
在这里插入图片描述

node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

修改 npm 默认镜像源

npm是node管理下载模块的工具,如果在项目使用的过程中需要一些依赖,就可以使用npm命令进行安装

类似于python编译器中的pip包管理工具

npm  install 模块名 --registry=http://registry.npmmirror.com

npm源永久替换为淘宝的镜像源

  1. 命令修改
npm config set registry http://registry.npmmirror.com
  1. 文件修改
    打开.npmrc文件(~nodejs\node_modules\npm\npmrc,没有的话可以使用git命令行建一个( touch .npmrc),用cmd命令建会报错)增加 registry=http://registry.npmmirror.com 即可。(node安装目录)
    如果需要恢复成原来的官方地址只需要执行如下命令:
npm config set registry https://registry.npmjs.org

也可以使用cnpm命令,不修改npm(这里不介绍)

由于npm的源在国外,所以国内用户使用起来各种不方便,可能会出现无法访问,发生异常,或者下载缓慢等问题。为此,淘宝搭建了 cnpm(中国 npm 镜像的客户端),它是一个完整的 npmjs.org 镜像,你可以用此代替官方版本

uniapp小程序

配置

  1. uniapp小程序运行到小程序模拟器前应该在创建的uniapp项目的配置文件manifest.json中配置小程序appid
    在这里插入图片描述

  2. 小程序模拟器路径配置 工具->设置->运行设置 下找到小程序运行配置 选择已安装的微信开发者工具位置
    在这里插入图片描述

  3. 配置node路径 工具->设置->运行设置 下找到node运行配置
    在这里插入图片描述

  4. 在微信开发者工具上面开启服务端口
    在这里插入图片描述

运行

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
在这里插入图片描述

uniapp会生成小程序的应用文件,文件目录在项目的 unpackage\dist\dev\文件夹下的mp-weixin
小程序配置
在这里插入图片描述

使用常用的UI组件库

1、uview https://www.uviewui.com/
尤其针对底部tabbar动态显示,给出了优化方案,采用还是原生得tabbar

uView2.0重磅发布,利剑出鞘,一统江湖,https://ext.dcloud.net.cn/plugin?id=1593

2、Thor UI组件库 https://thorui.cn/doc/

ThorUI组件库 - DCloud 插件市场,https://ext.dcloud.net.cn/plugin?id=556

3、 GraceUI http://grace.hcoder.net/manual/info/167-110.html

4、FirstUI 组件库 FirstUI(https://www.firstui.cn/)

FirstUI 组件库 - DCloud插件市场,https://ext.dcloud.net.cn/plugin?id=7646

5、vantUi 组件库 https://vant-ui.github.io/vant-weapp/#/home

uview安装和使用

uView依赖SCSS,您必须要安装此插件,否则无法正常运行。

  • 如果您的项目是由HBuilder X创建的,相信已经安装scss插件,如果没有,请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装, 如不生效,重启HX即可
  • 如果您的项目是由vue-cli创建的,请通过以下命令安装对sass(scss)的支持,如果已安装,请略过。
// 安装node-sass
npm i node-sass -D
// 安装sass-loader
npm i sass-loader -D
使用npm安装

初次使用npm安装的话,在项目页面下初始化一下

npm init -y

安装uview

npm install uview-ui@1.8.8

如果npm下载 npm err network报错的话,就需要修改npm的下载源地址(npm下载默认源是国外地址)
也可使用国内的下载工具cnpm

配置使用
  1. 引入uView主JS库
    在项目根目录中的main.js中,引入并使用uView的JS库,注意这两行要放在import Vue之后。
// main.js
import uView from "uview-ui";
Vue.use(uView);
  1. 在引入uView的全局SCSS主题文件
    在项目根目录的uni.scss中引入此文件。
/* uni.scss */
@import 'uview-ui/theme.scss';
  1. 引入uView基础样式

注意!
在App.vue中首行的位置引入,注意给style标签加入lang="scss"属性

<style lang="scss">/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */@import "uview-ui/index.scss";
</style>
  1. 配置easycom组件模式
    此配置需要在项目根目录的pages.json中进行。

温馨提示
uni-app为了调试性能的原因,修改easycom规则不会实时生效,配置完后,您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段,否则请自行合并多个引入规则。

// pages.json
{"easycom": {"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"},// 此为本身已有的内容"pages": [// ......]
}

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

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

相关文章

# OpenCV 图像预处理—形态学:膨胀、腐蚀、开运算、闭运算 原理详解

文章目录 形态学概念膨胀使用膨胀操作来修复裂痕示例代码关键解析&#xff1a; 腐蚀使用腐蚀操作消除噪点示例代码&#xff1a; 开运算—先腐蚀后膨胀闭运算—先膨胀后腐蚀 形态学概念 首先看这两张图片 一张图周围有大大小小的噪音和彩点&#xff0c;另一张图片中字母有间隙&…

Android 适配:版本适配

文章目录 自定义ViewGroup添加View时对View对应的LayoutParams的处理操作 自定义ViewGroup添加View时对View对应的LayoutParams的处理操作 Android 7只需要重写ViewGroup的generateLayoutParams方法&#xff0c;创建需要的LayoutParmas Overridepublic LayoutParams generateL…

php连接sql server

php连接sqlserver有三种方式 一&#xff1a;odbc连接&#xff0c;废话不多说直接上代码,封装了一个单例 <?php /*** odbcServer.php* Author: Erekys*/namespace App\Model; class odbcServer{public static $server;public static $username;public static $password;pu…

【2024最新】汇总国内免费GPT接口(响应快)

一、什么是GPT接口&#xff1f; GPT接口通常指的是一种编程接口&#xff08;API&#xff09;&#xff0c;它允许开发者将生成预训练转换器&#xff08;Generative Pre-trained Transformer&#xff0c;简称GPT&#xff09;的能力集成到自己的应用程序中。GPT是一种人工智能模型…

基于jeecgboot-vue3的Flowable流程仿钉钉流程设计器-发送信息服务处理

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、因为仿钉钉设计器里发送消息处理是一个服务任务&#xff0c;所以要根据这个服务任务进行处理 2、这里目前只对消息进行处理&#xff0c;就是用websocket的发送方式 输入相应的内容&…

go语言Gin框架的学习路线(十)

目录 GORM的CRUD教程 查询 普通查询 定义 User 结构体 查询所有用户 查询第一个用户 总结 条件查询 内联条件 额外查询选项 高级查询 链式操作 Scopes 多个立即执行方法 GORM的CRUD教程 CRUD 是 "Create, Read, Update, Delete"&#xff08;创建、查询…

电影类平台如何选择服务器

电影类平台如何选择服务器 1、数据存储 电影网站对服务器的要求是比较高的&#xff0c;对存储空间的需求特别大&#xff0c;所以在服务器选择上首先要确保足够大的存储空间。另外&#xff0c;当你的网站内容特别多时&#xff0c;内存不够用&#xff0c;可以选择增加内存&#x…

AIoTedge边缘物联网平台,开启智能物联新架构

边缘物联网平台是一种将计算能力、数据处理和应用服务部署在网络边缘的解决方案&#xff0c;旨在提高响应速度、降低带宽需求和增强数据安全。根据搜索结果&#xff0c;边缘物联网平台应具备以下功能&#xff1a; 云边协同&#xff1a; 云边一体架构&#xff0c;通过云端管理边…

electron笔记:electron更新版本

一.electron版本由13.6.9更新至22.3.27 之前因为remote的原因&#xff0c;electron版本停留在13.6.9&#xff0c;14.x后需要单独处理remote&#xff0c;此次需要Chrome 95以上部分功能&#xff0c;所以需要升级版本到16.x以上&#xff0c;因为本机nodejs版本为16.9.1&#xff…

【深度学习基础】深度学习的关键概念和网络结构

深度学习基础&#xff1a;深度学习的关键概念和网络结构 目录 引言深度学习的关键概念 神经网络激活函数损失函数优化算法 深度学习的网络结构 前馈神经网络&#xff08;FNN&#xff09;卷积神经网络&#xff08;CNN&#xff09;循环神经网络&#xff08;RNN&#xff09;生成…

【java基础】创建线程的主要方式

在Java中创建线程主要有三种方式&#xff1a; 继承Thread类 这是最传统的创建线程的方式。你需要创建一个Thread类的子类&#xff0c;并重写run()方法。在run()方法中编写线程要执行的代码。然后&#xff0c;实例化这个子类并调用start()方法来启动线程。 class MyThread exten…

【BUG】已解决:Downgrade the protobuf package to 3.20.x or lower.

Downgrade the protobuf package to 3.20.x or lower. 目录 Downgrade the protobuf package to 3.20.x or lower. 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身…

【昇腾AI创新大赛集训营南京站学习笔记】-Ascend算子开发课程

昇腾AI创新大赛训练营 14:00-14:30 基础知识-理论课 一、CANN 、达芬奇架构和算子 1.AI Core逻辑架构 达芬奇架构包含三部分&#xff1a; 1&#xff09;计算类&#xff1a;矩阵计算单元&#xff08;两个矩阵扔进去相乘&#xff09;、向量计算单元、标量计算单元 2&#xff09;控…

逻辑漏洞面试问题

1、你挖过业务逻辑漏洞吗&#xff1f;了解的有哪些&#xff1f;如何进行的&#xff1f;对于业务逻辑漏洞&#xff0c;只有一个登录框&#xff0c;你 会怎么测试&#xff1f;逻辑漏洞 xray 如何避免敏感操作&#xff1f; 常见的业务逻辑漏洞类型包括&#xff1a;订单支付漏洞、…

剑指offer的面试题,赋值运算符函数

class CMyString {public:CMyString(char*pDatanullptr);CMyString(const CMyString&str);~CMyString(void);private:char*m_pData;} 如上为类型Cmystring的声明&#xff0c;请为该类型添加赋值运算符函数。 class CMyString { public:CMyString(char* pData nullptr);CMy…

C#港澳台通行证识别接口、台胞证识别、ocr证件识别

在这个快节奏的时代&#xff0c;效率至上&#xff0c;每一秒都弥足珍贵。想象一下&#xff0c;无需手动输入繁琐的证件信息&#xff0c;仅需轻轻一扫&#xff0c;证面上所有文字信息便可呈现在眼前将是多么的便利&#xff0c;这得益于文字识别技术衍生下的-证件识别接口&#x…

基于单片机控制的变压器油压油温故障检测

摘 要 在电力系统的运行中&#xff0c;通过对其核心设备变压器的故障进行检测&#xff0c;以此能够及时、准确的发现变压器的故障&#xff0c;基于单片机控制的变压器油压油温的故障检测的方法&#xff0c;利用压力传感器、温度传感器对变压器的油压、油温进行采集并送入单片机…

vCenter 错误提示 “目标主机上的vmotion接口未配置”

vCenter 错误提示 “目标主机上的vmotion接口未配置” VMware 使用 vCenter 迁移 虚拟机报错 “目标主机上的 vMotion 接口未配置”&#xff0c;配置启用 vMotion 的步骤如下&#xff1a; &#xff08;END&#xff09;

【CentOS7】解决 CentOS 7 使用 `yum` 时出现的错误

解决 CentOS 7 使用 yum 时出现的错误 问题 在使用 yum 进行各种操作时&#xff08;例如 Plesk 更新、系统更新、软件包安装等&#xff09;&#xff0c;可能会出现以下错误&#xff1a; Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86…

Spring Bean 循环依赖

在Spring框架中&#xff0c;Bean的创建和管理是其核心功能之一。然而&#xff0c;在复杂的应用系统中&#xff0c;Bean之间可能会形成循环依赖&#xff08;Circular Dependency&#xff09;&#xff0c;这种情况如果不加以妥善处理&#xff0c;将会导致Spring容器在初始化时抛出…