B2C 标准版 (PHP) 演示 标准版 (PHP)
S2B2C 会员电商系统演示 Pro会员电商系统
S2B2C/O2O 多门店系统演示 多门店系统
B2B2C/O2O 多商户系统 (PHP) 演示 多商户系统 (PHP)
B2B2C/O2O 多商户系统 (Java) 演示 多商户系统 (Java)
B2C 标准版 (Java) 演示 标准版 (Java)
B2B2C 多商户外贸版演示 多商户外贸版
B2C 知识付费系统演示 知识付费系统
陀螺匠
产品 演示网址 账号 密码

CRMEB客服

CRMEB咨询热线 咨询热线

400-8888-794

CRMEB微信扫码咨询

微信扫码咨询

微信扫码咨询

应用市场 应用市场 CRMEB开源商城下载 源码下载 CRMEB帮助文档 帮助文档
返回顶部 返回顶部
CRMEB客服
CRMEB论坛
使用uniapp开发跨端小程序
2020-12-01
56032

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


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 第一次使用,需要配置开发工具的相关路径。


使用uniapp开发跨端小程序


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

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

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


使用uniapp开发跨端小程序


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

  • 通过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默认模板目录

使用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}


微信登录/注册

切换手机号登录

{{ bind_phone ? '绑定手机' : '手机登录'}}

{{codeText}}
切换微信登录/注册
暂不绑定
添加官方客服微信
CRMEB公众号二维码

联系客服 领取源码+接口文档🎁