返回顶部
首页 > 资讯 > 移动开发 >uniapp(一)
  • 654
分享到

uniapp(一)

uni-app微信小程序小程序Poweredby金山文档 2023-09-07 12:09:57 654人浏览 独家记忆
摘要

一、初识微信小程序 1、什么是微信小程序 微信小程序简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用 小程序是一种新的开放能力,开发者可以快

一、初识微信小程序

1、什么是微信小程序

微信小程序简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验

2、注册小程序

3、获取小程序的AppID

扫码登录后进入小程序管理后台,左侧栏中选择开发>开发管理>开发设置,就能看到AppID(小程序ID)

4、微信开发者工具

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4、创建小程序项目

5、 查看运行效果

  • 在模拟器上查看项目效果:单击编译按钮即可

  • 在真机上预览项目效果:单击的预览按钮,然后生成二维码后,使用手机扫描,就可以看到真机的效果了。

二、uniapp简介

1、uniapp简介

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

即使不跨端,uni-app同时也是更好的小程序开发框架。

三、创建和运行uniapp

1、安装HBuilderX

uni-app支持通过 可视化界面方式快速创建项目,可视化的方式比较简单,HBuilderX内置相关环境,开箱即用,无需配置nodejs。开始之前,开发者需先下载安装HBuilderX,HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

  • 下载类型:正式版|windows版|App开发版

2、创建uniapp项目

在点击工具栏里的文件 -> 新建 -> 项目:

选择uni-app类型,输入工程名,选择默认模板,选择Vue版本,点击创建,即可成功创建。

3、运行uniapp项目到浏览器上

进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。

4、在微信开发者工具里运行

进入uni-movies项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app

注意:

如果是第一次使用

  • 设置微信开发者工具路径(第一次运行,在运行之前会自动弹框自动设置,如果不是第一次,可以在运行>运行到小程序模拟器>运行设置>运行配置中进行设置)

  • 需要在微信开发者工具中,设置>安全设置中,开始服务端口

  • 在manifest.JSON中设置APPID,否则在微信开发者工具控制台会报错

5、在Android真机上运行

  • 点击菜单栏>运行>运行到手机或模拟器,第一次需要下载真机插件,下载好之后,后续就会出现运行到Android App基座

  • 打开手机的开发者选项,允许USB调试,选择USB配置(Audio Source)

  • 在HBuilder X中检测到Android设备后,如下图所示

四、项目打包

1、h5打包

  • 登录dcloud账户,在manifest.json的基础配置选项中,点击重新获取uniapp应用标识APPID

  • 在manifest.json的Web配置选项的运行的基础路径中输入./

  • 在菜单栏的发行栏目,点击网站-PC或手机H5

  • 输入网站标题和网站域名,点击发行

  • 在控制台中生成报表,报告中显示生成的文件在硬盘中的位置,拷贝后上传服务器后部署

2、Android打包

  • 登录dcloud账户,在manifest.json的基础配置选项中,点击重新获取uniapp应用标识APPID

  • 点击菜单栏的发型栏目,选择原生App云打包

  • 选择Android设置选项,输入各项内容,然后点击打包

五、项目目录结构

1、项目目录结构

┌─components            uni-app组件目录│ └─comp-a.vue         可复用的a组件├─pages                 业务页面文件存放的目录│ ├─index│ │ └─index.vue       index页面├─static                存放应用引用静态资源(如图片、字体等)的目录,注意:不要在这个文件中存放存放CSS、js文件├─main.js               Vue初始化入口文件├─App.vue               应用配置,用来配置小程序的全局样式、生命周期函数等├─manifest.json         配置应用名称、appid、loGo、版本等打包信息└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息|_uni.scss:代表公共样式的公共文件,全局样式

当然,大家也可以在根目录下创建其他目录,比如

utils:存放工具的,比如日期处理函数

store:数据仓库,状态机

request:存放请求,对请求封装过后的代码放在里面

2、安装scss

uniapp项目下面有一个uni.scss文件,但是默认不支持sass,官方推荐我们使用scss来作为css预编译。

安装scss插件,让我们的项目能够使用scss。

具体安装步骤

  • 工具栏>插件安装>安装新插件>前往插件市场安装(P)

  • 使用dcloud账号登录

  • 搜索sass/scss进入

  • 点击右侧使用HBuilderX 导入插件按钮

六、配置文件

1、globalStyle全局外观配置

"globalStyle": {    "navigationBarTextStyle": "white",    "navigationBarTitleText": "蜗牛商城",    "navigationBarBackgroundColor": "#ea9518",    "backgroundColor": "#F8F8F8"}

2、pages的配置

"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages        {            "path": "pages/index/index",            "style": {                "navigationBarTitleText": "首页"            }        },        {            "path": "pages/category/index",            "style": {                "navigationBarTitleText": "分类"            }        },        {            "path": "pages/mine/index",            "style": {                "navigationBarTitleText": "我的"            }        }],

3、tabbar的配置

"tabBar": {        "color": "#cdcdcd",        "selectedColor": "#ea9518",        "borderStyle": "white",        "list": [            {                "pagePath": "pages/index/index",                "text": "首页",                "iconPath": "static/icon/home.png",                "selectedIconPath": "static/icon/home_selected.png"            },            {                "pagePath": "pages/category/index",                "text": "分类",                "iconPath": "static/icon/lession.png",                "selectedIconPath": "static/icon/lession_selected.png"            },            {                "pagePath": "pages/mine/index",                "text": "我的",                "iconPath": "static/icon/mine.png",                "selectedIconPath": "static/icon/mine_selected.png"            }        ]    },

来源地址:https://blog.csdn.net/m0_74331185/article/details/128876944

--结束END--

本文标题: uniapp(一)

本文链接: https://www.lsjlt.com/news/398197.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • uniapp(一)
    一、初识微信小程序 1、什么是微信小程序 微信小程序简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用 小程序是一种新的开放能力,开发者可以快...
    99+
    2023-09-07
    uni-app 微信小程序 小程序 Powered by 金山文档
  • 浅析UniApp的一些常用写法
    UniApp是一个基于Vue.js的跨平台开发框架,可以开发iOS、Android、H5以及小程序等多个平台的应用程序。而在UniApp的开发中,有一些比较重要的写法需要我们注意和掌握,下面我们一起来详细了解一下。一、框架的结构UniApp...
    99+
    2023-05-14
  • uniapp切换语言只生效一次
    随着全球化的快速发展,越来越多的应用需要支持多种语言。而uniapp作为一款跨平台的框架,在实现多语言切换时也受到了广泛的关注。然而,一些开发者反馈在使用uniapp框架进行多语言切换时,发现切换语言只生效一次,也就是说在切换到另一种语言后...
    99+
    2023-05-22
  • 自己写一个uniapp全局弹窗(APP端)
    目录效果图: 解决思路:方法如下:1. 首先创建一个整个屏幕的控件,作为一个父容器。2. 绘制遮罩层3.绘制通知框样式4. 绘制标题和内容5. 创建确认按钮控件下面是项目中...
    99+
    2022-11-13
    Uniapp全局自定义弹窗 uniapp升级弹窗ui uniapp弹窗怎么写
  • uniapp小程序 手机号授权一键登录 小程序接口调用getPhoneNumber java+uniapp
    uniapp 前端 uniapp登录按钮: (在button加上这俩个参数) open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" 微信授权登录 methods方法区...
    99+
    2023-09-28
    uni-app 小程序 微信
  • 基于JavaSpringBoot+uniapp制作一个记账小程序
    你不理财,财不理你,制作一个记账小程序对自己的收入/支出明细进行管理,守护好自己的钱袋子。 一、小程序 1.1 项目创建 1.2 首页 1.3 收支报表页 ...
    99+
    2023-08-16
    微信小程序 小程序 记账 理财 记账小程序 原力计划
  • 基于JavaSpringBoot+uniapp制作一个打卡小程序
    生活中打卡的场景无处不在,上班打卡、景点打卡、活动打卡、课堂考勤打卡、在CSDN的APP上也有签到打卡。 一、小程序 1. 创建小程序 2. 地图页 ...
    99+
    2023-08-24
    微信小程序 旅游 打卡 上班 地图
  • uniapp怎么跳转回上一页并刷新页面
    Uniapp是一个基于Vue.js框架开发的跨平台移动应用开发框架,在开发过程中,我们经常会遇到需要跳转到上一页并刷新页面的需求,本篇文章将介绍如何实现这一功能。一、前置知识在实现跳转回上一页并刷新页面的过程中,需要使用到两个API:uni...
    99+
    2023-05-14
  • uniapp如何import
    Uniapp是一种基于Vue.js的跨平台框架,可以用于快速开发跨平台的应用程序。在Uniapp中,import是一种常见的导入模块的方式。通过import,可以将需要的模块导入到Uniapp的代码中,并使用其中的变量和函数。在本文中,将详...
    99+
    2023-05-22
  • 手把手教你写一个uniapp通用页面组件
    目录前言需求开发初始化页面数据实现状态栏与底部配置页面使用总结前言 做移动端项目时为了兼容各种手机型号的界面,最好有一个统一的页面组件对样式做统一处理,例如:判断是否显示状态栏,是否...
    99+
    2022-12-15
    uniapp 组件开发 uniapp组件使用 uniapp通用页面组件
  • 一文详解如何在uniapp中优雅地使用WebView
    目录从webview页面传值到uniapp中从uniapp中动态传值到webview页面调用webview中的方法总结这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 从...
    99+
    2023-01-03
    uniapp使用webview的方法 uniapp和webview实时交互 uniapp使用webview
  • 一文详解uniapp中如何使用easycom自定义组件
    目录一、全局注册二、局部注册第一种:传统vue规范第二种:通过uni-app的easycom规则第三种方法:通过npm安装总结一、全局注册 uni-app 支持配置全局组件,需在 m...
    99+
    2023-05-18
    uniapp easycom uniapp 自定义组件 uniapp easycom自定义组件
  • uniapp导入(android)jar
    官方文档:开发者须知 | uni小程序SDK 1.下载对应示例代码及工具 JAVA环境 jdk1.8Android Studio 下载地址:Android Studio官网 OR Android Studio中文社区App离线SDK下载:请...
    99+
    2023-09-10
    uni-app
  • Uniapp怎么做ssr
    UniApp是一个基于Vue.js框架的跨平台应用开发框架,允许开发者同时构建iOS、Android、H5和小程序应用。所以,在性能要求较高的场景中可能需要使用SSR(Server-Side Rendering,即服务器端渲染)解决渲染性能...
    99+
    2023-05-14
  • uniapp运行报错
    UniApp是一个跨平台的开发框架,能够快速开发出各种应用程序。由于其方便的开发方式和跨平台的特性,越来越受到开发者的喜爱。然而,在使用UniApp的过程中,也可能会遇到各种问题,其中比较常见的就是运行报错。本文将介绍UniApp运行报错的...
    99+
    2023-05-22
  • uniapp怎么打包
    随着移动设备的广泛普及,越来越多的企业和个人开始开发移动应用程序,而uniapp平台的出现,为开发人员提供了更加高效、简便和灵活的开发方式。而在开发完成后,如何打包成可用的应用程序,也是一个不可忽视的问题。本文将详细介绍uniapp如何打包...
    99+
    2023-05-22
  • uniapp如何打包
    随着移动互联网的发展,越来越多的企业和个人开始关注移动应用的开发与推广。相信很多开发者选择了uniapp作为自己的开发框架,因为它可以一次编写代码,同时支持多端运行。但是,开发出来的uniapp需要打包才能转换成最终可用的APP。本文将详细...
    99+
    2023-05-21
  • uniapp怎么做3D
    随着AR/VR技术的不断发展,越来越多的开发者开始尝试在移动端上实现3D效果。与此同时,uniapp也成为了一款备受关注的跨平台开发框架。那么,如何在uniapp中实现3D效果呢?本文将为大家介绍uniapp中3D的实现方式。一、使用Thr...
    99+
    2023-05-22
  • uniapp 禁止横屏
    摘要:本文主要介绍了如何在uniapp应用中禁止横屏,防止因为横屏而导致的布局错乱和用户体验下降。在移动端应用开发中,横屏模式和竖屏模式都是很重要的布局方式。横屏模式可以让应用在水平方向占用更多的空间,提高信息的展示效率。但是,过于依赖横屏...
    99+
    2023-05-22
  • uniapp反编方法
    随着移动应用的普及,很多开发者选择使用uniapp来快速地开发跨平台小程序和原生应用。但是,一旦应用被发布,就可能会面临被反编译的风险,特别是对于一些商业应用来说这个风险更是无法忽视的。本文将介绍一些反编方法和如何去保护你的uniapp应用...
    99+
    2023-05-22
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作