使用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.rhkb.cn/news/382545.html

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

相关文章

Go基础编程 - 11 - 函数(func)

接口&#xff08;interface&#xff09; 函数1. 函数定义1.1. 函数名1.2. 参数列表1.3. 返回值列表 2. 匿名函数3. 闭包、递归3.1 闭包3.1.1 函数、引用环境3.1.2 闭包的延迟绑定3.1.3 goroutine 的延迟绑定 3.2 递归函数 4. 延迟调用&#xff08;defer&#xff09;4.1 defer特…

C++客户端Qt开发——Qt窗口(工具栏)

2.工具栏 使用QToolBar表示工具栏对象&#xff0c;一个窗口可以有多个工具栏&#xff0c;也可以没有&#xff0c;工具栏往往也可以手动移动位置 ①设置工具栏 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QToolBar> #include<…

责任链模式的应用与解析

目录 责任链模式责任链模式结构责任链模式适用场景责任链模式优缺点练手题目题目描述输入描述输出描述题解 责任链模式 责任链模式&#xff0c;亦称职责链模式、命令链&#xff0c;是一种行为设计模式&#xff0c;允许你将请求沿着处理者链进行发送。收到请求后&#xff0c;每…

H3CNE(OSPF动态路由)

7.1 静态路由的缺点与动态路由分类 7.1.1 静态路由的缺点 7.1.2 动态路由的分类 OSPF运行的机制&#xff1a; 1. 每个设备产生LSA后&#xff0c;都会与其他的设备同步LSA&#xff0c;通过OSPF的报文&#xff0c;去发送与接受其他的LSA&#xff0c;最终目的是每个设备都有全网所…

【BUG】已解决:ModuleNotFoundError: No module named ‘requests‘

ModuleNotFoundError: No module named ‘requests‘ 目录 ModuleNotFoundError: No module named ‘requests‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&a…

Java面试题(每日更新)

每日五道&#xff01;学会就去面试&#xff01; 本文的宗旨是为读者朋友们整理一份详实而又权威的面试清单&#xff0c;下面一起进入主题吧。 目录 1.概述 2.Java 基础 2.1 JDK 和 JRE 有什么区别&#xff1f; 2.2 和 equals 的区别是什么&#xff1f; 2.3 两个对象的…

【LeetCode】86.分割链表

1. 题目 2. 分析 这题没有太大难度&#xff0c;主要是熟悉代码。 3. 代码 # Definition for singly-linked list. # class ListNode: # def __init__(self, val0, nextNone): # self.val val # self.next next class Solution:def partition(self, he…

SQL中的LEFT JOIN、RIGHT JOIN和INNER JOIN

在SQL中&#xff0c;JOIN操作是连接两个或多个数据库表&#xff0c;并根据两个表之间的共同列&#xff08;通常是主键和外键&#xff09;返回数据的重要方法。其中&#xff0c;LEFT JOIN&#xff08;左连接&#xff09;、RIGHT JOIN&#xff08;右连接&#xff09;和INNER JOIN…

windows服务器启动apache失败,提示请通过cmd命令行启动:net start apache

Windows Server 2012 R2服务器突然停止运行apche&#xff0c;启动apache失败&#xff0c;提示请通过cmd命令行启动:net start apache 1.报错截图&#xff1a; 进入服务里输入命令启动也不行&#xff0c;提示由于登录失败而无法启动服务。 2.问题原因&#xff1a; 服务器www用…

Yolo-World网络模型结构及原理分析(三)——RepVL-PAN

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1. 网络结构2. 特征融合3. 文本引导&#xff08;Text-guided&#xff09;4. 图像池化注意力&#xff08;Image-Pooling Attention&#xff09;5. 区域文本匹配&…

Invalid bound statement (not found)

Invalid bound statement (not found) 首先申明的是这个错误一般是使用mybatis方法没有找到或者参数不匹配等原因造成的&#xff01; 原本项目是使用eclipse运行&#xff0c;导入到idea之后&#xff0c;项目启动就报错 …Invalid bound statement (not found)… 解决办法&#…

下载最新版Anaconda、安装、更换源、配置虚拟环境并在vscode中使用

文章目录 进入官网进入下载页安装更换源配置虚拟环境env安装包requests在vscode中使用虚拟环境 进入官网 https://repo.anaconda.com/ 或进入清华大学下载 https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 进入下载页 安装 更换源 查看已经存在的镜像源 bash cond…

【机器学习】Jupyter Notebook如何使用之基本步骤和进阶操作

引言 Jupyter Notebook 是一个交互式计算环境&#xff0c;它允许创建包含代码、文本和可视化内容的文档 文章目录 引言一、基本步骤1.1 启动 Jupyter Notebook1.2 使用 Jupyter Notebook 仪表板1.3 在笔记本中工作1.4 常用快捷键1.5 导出和分享笔记本 二、进阶用法2.1 组织笔…

天工Godwork AT 5.2.6 GodWork2D 2.1.5 GodWork EOS 2.1实景三维建模软件

天工Godwork AT 5.2.6/GodWork2D 2.1.5/GodWork EOS 2.1实景三维建模软件 获取安装包联系邮箱:2895356150qq.com 本介绍用于学习使用&#xff0c;如有侵权请您联系删除&#xff01; 1.自主研发的平差技术&#xff0c;平差模块不依赖PATB、Bingo等国外技术 2.采用特征匹配&…

【北京迅为】《i.MX8MM嵌入式Linux开发指南》-第三篇 嵌入式Linux驱动开发篇-第四十七章 字符设备和杂项设备总结回顾

i.MX8MM处理器采用了先进的14LPCFinFET工艺&#xff0c;提供更快的速度和更高的电源效率;四核Cortex-A53&#xff0c;单核Cortex-M4&#xff0c;多达五个内核 &#xff0c;主频高达1.8GHz&#xff0c;2G DDR4内存、8G EMMC存储。千兆工业级以太网、MIPI-DSI、USB HOST、WIFI/BT…

【es】elasticsearch 自定义排序-按关键字位置排序

一 背景 要求es查询的结果按关键字位置排序&#xff0c;位置越靠前优先级越高。 es版本7.14.0&#xff0c;项目是thrift&#xff0c;也可以平替springboot&#xff0c;使用easyes连接es。 二 easyes使用 配easyes按官方文档就差不多了 排序 | Easy-Es 主要的一个问题是easy…

HTTPServer改进思路2(mudou库核心思想融入)

mudou网络库思想理解 Reactor与多线程 服务器构建过程中&#xff0c;不仅仅使用一个Reactor&#xff0c;而是使用多个Reactor&#xff0c;每个Reactor执行自己专属的任务&#xff0c;从而提高响应效率。 首先Reactor是一种事件驱动处理模式&#xff0c;其主要通过IO多路复用…

ST Stellar-E SR5E1 22KW OBC combo 3KW DC-DC汽车充电器解决方案

对于全球的环境保护意识抬头&#xff0c;全球的汽车产业慢慢步入电动化的时代&#xff0c;以减少碳排放。整车系统主要是由电池、电驱、电控的三电所构成&#xff0c;其中电池系统是整车的动力来源&#xff0c;而对电池充电的OBC系统更甚重要。一具高度安全性且高效的OBC系统&a…

7.23 字符串简单中等 520 125 14 34

520 Detect Capital 思路&#xff1a; 题目&#xff1a;判定word &#xff1a;if the usage of capitals in it is right.遍历所有的string&#xff1a; 两种情况&#xff1a; 首字母capitals–>判定第二个字母是否大写–>所有字母大写 otherwise 除第一个以外全部小写&a…

使用xxl-job执行定时任务

文章目录 使用xxl-job执行定时任务xxl-job原理我们自己的项目里面需要怎么写定时任务呢&#xff1f;如果想要使用xxl-job我们需要在服务器上部署两个项目 使用xxl-job执行定时任务 xxl-job原理 首先xxl-job的全拼是“XiaoXiaoLiang Job”或者“Xu Xue Li”作者的名字&#xf…