使用uniapp开发跨端小程序——CRMEB开源商城系统
全国统一咨询热线:

15817498839

当前位置: 网站首页 > 使用uniapp开发跨端小程序

使用uniapp开发跨端小程序

2023年06月27日 01:43:20  来源:每日必看    

使用uniapp开发跨端小程序

uni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。uni-app在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力。

微信号:15817498839
添加微信好友, 获取更多信息
复制微信号



uniapp官网地址

uniapp官网地址:https://uniapp.dcloud.io/


uniapp的优势

  • 开发者/案例数量更多

  • 平台能力不受限 支持原生代码混写和原生sdk集成

  • 性能体验优秀 体验更好的Hybrid框架,加载新页面速度更快

  • 周边生态丰富 支持NPM、支持小程序组件和SDK、兼容mpvue组件和项目、兼容weex组件

  • 学习成本低 采用vue语法+微信小程序api

  • 开发成本低 开发成本,招聘、管理、测试各方面成本都大幅下降

uinapp特色

  1. 条件编译

#ifdef APP-PLUS需要条件编译的代码            

仅出现在App平台下的代码

#endif#ifndef H5需要条件编译的代码            

除了H5平台,其他平台均存在的代码#endif#ifdef H5 || MP-WEIXIN需要条件编译的代码            

在H5平台或微信小程序平台存在的代码#endif

条件编译是利用注释实现的,在不同语法里注释写法不一样,js使用 // #ifdef、css 使用 /* #ifdef */、vue/nvue 模板里使用

  1. App端的Nvue开发

  2. HTML5+

uniapp开发环境搭建

通过 HBuilderX 可视化界面 快速上手,创建项目,可参考官方文档,非常详细!


官方文档快速上手:https://uniapp.dcloud.io/quickstart


运行uni-app 第一次使用,需要配置开发工具的相关路径。



  1. 配置相应小程序开发者工具的路径

点击工具栏的运行 ==>> 运行到小程序模拟器 ==>>运行设置

  1. 在微信开发者工具打开时,需要先在微信开发者工具中开启服务端口



设置 ==>>安全 ==>> 开启服务端口

  • 通过vue-cli命令行

// 全局安装vue-cli  npm install -g @vue/cli// 创建uni-app  vue create -p dcloudio/uni-preset-vue my-project// 运行、发布uni-appnpm run dev:%PLATFORM%npm run build:%PLATFORM%%PLATFORM% 取值 app-plus(app平台)、h5、mp-alipay(支付宝)、mp-baidu(百度)、mp-weixin(微信)mp-toutiao(头条)、mp-qq(qq)、mp-360(360)、quickapp-webview(快应用通用)、quickapp-webview-huawei(快应用华为)、quickapp-webview-union(快应用联盟)


uniapp生命周期

生命周期

  • 应用生命周期 只能在App.vue中使用

// onLaunch  应用初始化完成 全局只触发一次// onShow  应用启动的时候 或者从后台进入前台会触发// onHide  应用从前台进入后台
  • 页面生命周期

// onload 监听页面加载 可以获取页面传参// onReady 监听页面的初次渲染完成// onShow 监听页面显示 包括从下级页面点返回露出当前页面// onHide 监听页面隐藏// onUnload 监听页面卸载// onPullDownRefresh 监听用户下拉动作,一般用于下拉刷新// onReachBottom 页面滚动到底部的事件 一般用于上拉加载// onTabItemTap 点击 tabbar 触发// onShareAppMessage 用户点击右上角分享

组件生命周期(即vue的生命周期)uni-app 组件支持的生命周期,与vue标准组件的生命周期相同!

  • 常用生命周期执行顺序

// App Launch// APP Show// Page Onload// Page onShow// component beforeCreate// component created// component beforeMounted// component Mounted// Page onReady// component beforeDestroy// component destroyed// Page onUnload


uniapp默认模板目录

文件目录说明

  • components 自定义组件的目录

  • pages 页面存放目录

  • static 静态文件资源目录

  • unpackage 编译后的文件存放目录

  • app.vue 全局公用的状态数据等

  • main.js 应用入口

  • manifest.json 项目基础配置

  • pages.json 页面相关配置 注册页面 设置页面名称等

  • uni.scss 公用的scss变量 无需import这个文件

uniapp配置启动模式 condition

uniapp使用中其他问题

  • 屏蔽自定义导航栏 仅支持 default/custom,custom即取消默认的原生导航栏 注意事项

"globalStyle": {    "navigationStyle": "custom"
  }
  • 自动导入自定义组件 无需import

// components/navbar/navbar.vue// index.vue 中 直接使用// import navbar from '../components/navbar/navbar.vue'// components: {//   navbar// }
  • 在非H5 app mp-alipay中胶囊的位置

// 获取胶囊位置const menuButtonInfo = uni.getMenuButtonBoundingClientRect()console.log(menuButtonInfo)// wx {width: 87, height: 32, left: 278, right: 365, top: 26, bottom: 58}



标签:小程序 


每日必看相关文章

热门Tags标签
分销商城系统
O2O商城系统
新零售商城系统
APP商城系统
每日必看
    2023年06月27日 01:43:20最新发布使用uniapp开发跨端小程序文章,主要内容uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。uni-app在跨平台的过程中,不牺牲平台特色,可优雅的调用平台专有能力。微信号:15817498839添加微信好友,获取更多信息复制微信号uniapp官网地址uniapp官网
已复制微信号

微信号: 15817498839
长按二维码保存到手机!

立即添加微信
复制成功
微信号: 15817498839
添加微信好友, 获取更多信息
我知道了