1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

全局变量和全局方法是软件开发中常用的技术点! 实现方式大致分为: 1.vuex实现,值变动灵活 2.建立js文件,页面内引用 3.挂载vue实例后使用 4.小程序中的globalData 5.本地存储 这里简单讲解下uni-app中挂载到vue实例的全局属性和方法: 在Main.js中创建: Vue.prototype.$httpUrl = "https://xxx/"; //获取图片路径 Vue.prototype.getImgSrc = function(src){ var img

1.环境配置 (可参考uni-官网的环境配置) common文件夹下新建config.js let url_config = "" if(process.env.NODE_ENV === 'development'){ // 开发环境 url_config = 'https://*****.com/' }else{ // 生产环境 url_config = 'https://*****.com/' } export default url_config 2.uni.request封装

在项目 main.js 同级创建 utils 文件夹, utils里创建 config.js文件,存储重要参数 // 获取平台信息 const { system, } = uni.getSystemInfoSync() // 请求服务器环境,xxx 在这里是填充,请自行替换 let baseUrl = ['http://xxx', 'https://xxx'] // 小程序重要参数 uni.config = { platform: system.startsWith("iOS") ?

实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置. 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 单页面每一个需要分享的页面多需要单独写上 export default { //发送给朋友 onShareAppMessage(res) { if (res.from === 'button') {// 来自页面内分享按钮 console.log(res.target) } re

利用Vue.prototype挂载到Vue实例上即可

1.uni-app不支持动态组件,目前在用i-if判断,或者用scroll-view切换,没有想到什么其他的办法 2.uni-app不支持具名插槽,会导致页面塌陷 3.uni-app在做动态组件渲染的时候可能会对高度,偏移,定位不友好,但是用px单位就不会有问题,感觉原因是在打包的时候upx单位不会编译成px 4.平常我们再写vue项目的时候会写一个扫描文件,为的就是不用每个组件都去引用那么多组件,但是我在做uni-app的时候浏览器运行是没问题的,但是在安卓手机上并不支持,我打印了一下,确实是

学习任何框架必须将其生命周期了然于胸. uni-app支持如下页面生命周期函数: onLoad 监听页面加载,其参数为上个页面传递的数据,参数类型为object(用于页面传参),示例中可参考 onShow 监听页面显示 onReady 监听页面初次渲染完成 onHide 监听页面隐藏 onUnload 监听页面卸载 onPullDownRefresh 监听用户下拉动作 onReachBottom 页面上拉触底事件的处理函数 onShareAppMessage 用户点击右上角分享  微信小程序 o

结合上文全局登陆校验,实现微信授权登录官方手册地址: https://uniapp.dcloud.io/api/plugins/login?id=getuserinfo 一.书写两个界面 login.vue 用于用户登陆 my.vue 我的界面,存放校验登陆的函数 1.1 my.vue <script>    var loginRes;    export default {        onLoad:function(){            loginRes = this.checkL

1. 在 main.js 中封装全局登录函数 通过 vue 对象的原型扩展,可以扩展一个函数,这样这个函数就可以在每一个界面通过类似指向对象的方式,去访问这个函数. 如下是 main.js 扩展的函数: Vue.prototype.checkLogin = function(backpage, backtype){    var SUID  = uni.getStorageSync('SUID');    var SRAND = uni.getStorageSync('SRAND');    v

https://my.oschina.net/u/2428630/blog/3004860 uni-app框架中 安装(项目根目录下运行) npm install uni-request --save 文件中引用 import uniRequest from 'uni-request'; 使用方法 请求方法的别名 uniRequest.request(config) uniRequest.get(url[, config]) uniRequest.delete(url[, config]) un

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS.Android.H5.小程序等多个平台. 一套代码,运行多个平台 uni-app实现了一套代码,同时运行到多个平台:如下图所示,一套代码,同时运行到iOS模拟器.Android模拟器.H5.微信开发者工具.支付宝小程序Studio.百度开发者工具.字节跳动开发者工具(底部7个终端选项卡代表7个终端模拟器): 运行效果图如下: 开始之前,开发者需先下载安装如下工具: HBuilderX:官方ID

大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接这样写数组,需要在computed计算属性中手动拼接,如: :class="dynamicStyle" computed:{ dynamicStyle(){ return "defaultStyle red"; } } 2.:value="this.input

本人微信公众号:前端修炼之路,欢迎关注 背景介绍 经过上一篇文章uni-app官方教程学习手记的学习之后,我就着手做这个项目了. 目前已经初步搭出了整体的框架,秉着取之于社会,回馈于社会的原则,我将这个项目开源到GitHub uni-shop,发展壮大uni-app社区.项目肯定有不足和考虑不周之处,欢迎大家指正并提出Issues. 因为这是个真实的项目,为了一名合格的程序员的职业操守,项目真实数据部分并不会开源.为了提高整体的流畅性和帮助自己开发,数据部分采用Easy Mock模拟的假数据.有

uni-app 开发微信小程序 前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/

前言 uni-app uni-app是DCloud推出的终极跨平台解决方案,是一个使用Vue.js开发所有前端应用的框架,官网:https://uniapp.dcloud.io/ mui 号称最接近原生APP体验的高性能前端框架,官网:https://dev.dcloud.net.cn/mui/ 个人觉得,mui除了页面设计很接近原生App之外,还有一个特点就是能方便的使用App扩展规范Html5 Plus(http://www.html5plus.org/doc/h5p.html),我们能在它

登录微信小程序管理后台添加腾讯视频播放插件: 正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示: 在uni-app中引入插件代码: 注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多平台的原因,因此不同平台的开发相应的配置需要放到指定的位置才能够生效.而uni-app引入腾讯视频小程序有两种方式一种是整个小程序可使用(小程序中所有的分包可以使用),第二种是指定对

一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图),图片预览.地图位置.长按菜单.红包/钱包.仿微信朋友圈等功能. 二.测试效果 H5 + 小程序 + App端测试效果如下,实测多端效果均为一致.(后续大图统一展示App端) 二.技术选型 编辑器:HBuilder X 技术框架:uni-app + vue 状态管理:Vuex iconfont图标:阿

介绍 uniapp自定义弹窗组件uniPop,基于uni-app开发的自定义模态弹窗|msg信息框|alert对话框|confirm确认框|toast弱提示框 支持多种动画效果.多弹窗类型ios/android.可以自定义弹窗样式/自定义多按钮及事件/弹窗显示位置.自动关闭秒数.遮罩层透明度及点击遮罩是否关闭 H5/小程序/App三端效果如下,亲测多端效果兼容性一致.(后续大图均展示App端) 用法 ◆ 弹窗uniPop.vue组件两种引入方式 1.在main.js里引入全局组件 import

1. uni-app学习(五)好用的插件3 1.1. 分享推广页面 分享推广页面,分享第三方.保存二维码.复制推广地址 模板地址 示例 这个用到的几率还是蛮大的,可以直接拿来修改下用 1.2. 教育APP首页 纯界面设计,可以吸取点界面设计经验 地址 示例 1.3. 项目框架(推荐) 这个项目基础框架还是能学到不少东西的,它封装了路由router和路由配置页,全局存储store,后端地址统一管理,全局环境常量配置,静态资源地址统一管理,全局的包裹视图(在加载中或网络不给力时显示) 项目地址 1.