uniapp_uniapp- - CSDN
  • 课程包含Uniapp开发全端教程,课程由英特网络独家录制,购买课程后赠送后端CMS管理系统,可以修改商品及接口数据,同时CMS提供Uniapp所需要的全部API接口,包括课程内容:安卓证书申请/APP苹果打包/APP安卓打包/微信...
  • 课程特色:该门课程属于中高级进阶课程,课程开发一个仿阿里飞猪旅游app的微信小程序,该课程使用uni-app框架结合小程序云开发,开发语言使用vue,使用uniapp可以做更强大的小程序,该课程专为想要学习开发小程序...
  • 最近的任务是做一个混合的app,刚好我想玩一下uni-app怎么样,在考虑用哪个技术的时候,考虑了RN,Taro,uni-app,RN没有踩过坑怕hold不住,Taro很少看到编译成app的案例,而uni-app比较多,就决定是你了,然后...1....

    最近的任务是做一个混合的app,刚好我想玩一下uni-app怎么样,在考虑用哪个技术的时候,考虑了RN,Taro,uni-app,RN没有踩过坑怕hold不住,Taro很少看到编译成app的案例,而uni-app比较多,就决定是你了,然后...

    1.搭建环境

    上官网安装一下开发工具

    这里送上连接 www.dcloud.io/hbuilderx.h…
    然后需要安装微信开发者工具 最好用最新的

    如果直接写app的话 可以安装模拟器 我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了

    然后用开发工具 创建一个模板

    2.使用vuex

    uni-app已经内置vuex 不需要再安装了 

    在根目录下新建store文件 在其目录创建index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
    	state: {
    		text: 'demo'
    	},
    	mutations: {
    		SetText(state, v) {
                        state.text = v
                    }
    	},
    	actions: {
    		setText: function({commit}, v) {
                            commit('SetText', v)
                    }
    	}
    })
    
    export default store 复制代码

    然后在main.js入口文件

    import Vue from 'vue'
    import App from './App'
    
    // 这里引入store
    import store from './store'
    
    // 这里是重要的一步 这里不写 app会找不到store
    Vue.prototype.$store = store
    
    const app = new Vue({
    	store,
    	...App
    })
    app.$mount()复制代码

    3.配置

    打开manifest.json 这里是可视化的



    mac这边还有一个坑 需要配置微信开发者工具的路径 打开偏好设置


    如果不配置 一直会报错 如果出现启动不了微信开发者工具 可以自己找到编译好的目录 自己手动导入就可以了

    4.HBuilderX 1.9.8的坑

    首先是onLoad生命周期 调用路由的api会报错

    navigateTo with an already exist webviewId 1  复制代码

    如果出现这个错 解决办法就是延迟

    setTimeout(() => {
        uni.switchTab({
            url: '这里是路径'
        })
    }, 400)复制代码
    官方说在1.9.9+版本会修复

    5.获取节点

    支持微信小程序 H5 APP 其他没有测试

    uni.createSelectorQuery()
    // 官方说自定义组件模式 要这样写
    uni.createSelectorQuery().in(this)复制代码

    这里需要注意一点 要在onReady这个生命周期里面才能获取到

    6.swiper的高度问题

    大家如果写过微信小程序的话都知道swiper是要写一个高度的,而uni-app等于也是一个加强版的小程序,swiper也要写高度,但我们都不太能确定高度,只能用一些办法来确定它的高度

    第一种办法就是已知item的高度,在获取数据后,用item的高度*item的数量获得高度

    第二种就是用节点获取高度,我自己就用这个办法,亲测app跟微信小程序都ok

    // 先在swiper组件写上动态style来获得高度
    <swiper :style="{height: `${swiperHeight}px`}">
        <swiper-item v-for="(item,index) in tabList" :key="index">
            <div :class="columnList[index]"></div>
        </swiper-item>
    </swiper>
    
    // 这里的class 我一开始是用字符串模板来实现`columnList${index}`
    // 跑是能跑起来 但是会报错 忍不住自己就不用字符串了
    // 接着使用fun的办法 但是uni-app不支持这种写法
    // 后面想着用tabList的长度来初始化一个columnList (这个办法有点笨,如果有人有更好的办法,请告诉我这个菜鸡)
    
    // 书写一个获取节点的方法
    get_wxml(className, callback) {
        uni.createSelectorQuery().select(className).boundingClientRect(callback).exec()
    }
    // 在onReady生命周期里面获取高度
    onReady() {
        this.get_wxml(这里写你要获取的节点,我这里是我定义的columnList[index], (rects) => {
    	this.swiperHeight = rects.height
        })
    }复制代码

    7.条件编译

    多端开发肯定避免不了存在跨端的差异性,uni-app也提供了条件编译功能

    • #ifdef:if defined 仅在某平台存在
    • #ifndef:if not defined 除了某平台均存在

    写法如下

    #ifdef APP-PLUS
    需条件编译的代码
    #endif
    APP-PLUS是指app端的 还有更多端的 我这里提供链接 查询uniapp.dcloud.io/platform

    优化建议

    建议使用自定义组件模式

    每次data改变都会重新渲染视图,一些不是视图的变量,可以考虑定义在data外面

    写组件的时候避免多层嵌套,建议3 4层还最佳

    建议用vuex来管理数据,如果想要在app更好的性能可以使用nvue来开发

    开发体验

    uni-app的开发体验还行 但是需要自己去磨平部分一些跨端的差异 比如导航栏 我自己研究还不透 先不分享这块了

    关于app调试的时候没有打印出来,那个时候内心是绝望的,升级到1.9.7后就有了,但也不推荐大家盲目的升级,升级之后总有一些奇奇怪怪的bug,比如最近onload的问题

    我还在一边踩坑一边分享,所以这个文章会一直更新


    转载于:https://juejin.im/post/5cdcbb8f5188256001481114

    展开全文
  • 讲解uni-app中如何使用flex的布局,uni-app中原生界面开发必学技能 讲解了flex的容器属性 讲解了flex的项目属性
  • 1.#ifdef #ifndef #endif三者的意思 #ifdef 仅在某个平台上使用 #ifndef 在除了这个平台的其他平台上使用(非此平台使用) #endif 结束条件编译 2.平台标识的意思 ...微信小程序...

    1.#ifdef #ifndef #endif三者的意思

    #ifdef 仅在某个平台上使用
    #ifndef 在除了这个平台的其他平台上使用(非此平台使用)
    #endif 结束条件编译

    2.平台标识的意思

    标识 平台
    APP-PLUS 5+App
    MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
    MP-WEIXIN 微信小程序
    MP-ALIPAY 支付宝小程序
    MP-BAIDU 百度小程序
    MP-TOUTIAO 头条小程序
    MP-QQ QQ小程序
    H5 H5
    APP-PLUS-NVUE 5+App nvue

    3.结合使用例子

    例子1(仅在5+app平台上此代码生效)

    /*
    	可以使用// 或者 <!-- -->
    */
    // #ifdef APP-PLUS
     <view>仅在5+app平台上显示代码</view>
    // #endif
    
    methods: {
    	// #ifdef APP-PLUS
    	click(){
    		console.log('仅在5+app平台上生效的事件')
    	},
    	// #endif
    }
    

    例子2(非5+app平台上此代码生效)

    /*
    	可以使用// 或者 <!-- -->
    */
    <!-- #ifndef APP-PLUS -->
     <view>只要不是5+app平台上此代码会显示</view>
    <!-- #endif -->
    
    methods: {
    	<!-- #ifndef APP-PLUS -->
    	click(){
    		console.log('非5+app平台上生效的事件')
    	},
    	<!-- #endif -->
    }
    
    展开全文
  • uni-app条件编译:#ifdef #ifndef #endif 语法: // #ifdef %PLATFORM% 这些代码只在该平台编译 // #endif #ifdef : if defined 仅在某个平台编译 #ifndef : if not defined 在除里该平台的其他编译 ...

    uni-app条件编译:#ifdef #ifndef #endif

    语法:

    // #ifdef %PLATFORM% 
        这些代码只在该平台编译
    // #endif
    #ifdef :      if defined  仅在某个平台编译
    #ifndef :     if not defined  在除里该平台的其他编译
    #endif :      end if 结束条件编译
    %PLATFORM%     需要编译的平台,上面的MP就是各个小程序的意思

     

    uni-app支持的各个平台
    平台 参考文档
    APP-PLUS 5+App HTML5+ 规范
    APP-PLUS-NVUE 5+App nvue Weex 规范
    H5 H5  
    MP-WEIXIN 微信小程序 微信小程序
    MP-ALIPAY 支付宝小程序 支付宝小程序
    MP-BAIDU 百度小程序 百度小程序
    MP-TOUTIAO 头条小程序 头条小程序
    MP-QQ QQ小程序 (目前仅cli版支持)
    MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序  
    转载:https://www.cnblogs.com/shurun/p/11935451.html

     

    展开全文
  • 1.#ifdef #ifndef #endif三者的意思 #ifdef 仅在某个平台上使用 #ifndef 在除了这个平台的其他平台上使用(非此平台使用) #endif 结束条件编译 #ifde 2.平台标识的意思 ... 微信小程序/支付宝小程序...

    1.#ifdef #ifndef #endif三者的意思

    #ifdef 仅在某个平台上使用
    #ifndef 在除了这个平台的其他平台上使用(非此平台使用)
    #endif 结束条件编译

    #ifde

    2.平台标识的意思

    标识 平台
    APP-PLUS 5+App
    MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序
    MP-WEIXIN 微信小程序
    MP-ALIPAY 支付宝小程序
    MP-BAIDU 百度小程序
    MP-TOUTIAO 头条小程序
    MP-QQ QQ小程序
    H5 H5
    APP-PLUS-NVUE 5+App nvue

     

     

     

     

     

     

     

     

    2.结合使用列子

    例子1(仅在5+app平台上此代码生效)

    /*
    	可以使用// 或者 <!-- -->
    */
    // #ifdef APP-PLUS
     <view>仅在5+app平台上显示代码</view>
    // #endif
    
    methods: {
    	// #ifdef APP-PLUS
    	click(){
    		console.log('仅在5+app平台上生效的事件')
    	},
    	// #endif
    }

    例子2(非5+app平台上此代码生效)

    /*
    	可以使用// 或者 <!-- -->
    */
    <!-- #ifndef APP-PLUS -->
     <view>只要不是5+app平台上此代码会显示</view>
    <!-- #endif -->
    
    methods: {
    	<!-- #ifndef APP-PLUS -->
    	click(){
    		console.log('非5+app平台上生效的事件')
    	},
    	<!-- #endif -->
    }

    例子3 css 中使用

    // 除H5以外的平台使用
    .box{
     /* #ifndef H5 */
      position: fixed;
      top: 0;
      left: 0;
      /* #endif*/
    }

     

    展开全文
  • uni-app官方文档传送门:条件编译(点我) 相信很多刚接触uni-app的童鞋都不太喜欢先看完整官方文档。总会碰到很多不懂的地方第一时间上网搜答案,就比如在uni-app模版看到的#ifdef MP,这是什么鬼?...

    uni-app官方文档传送门:条件编译(点我)

    相信很多刚接触uni-app的童鞋都不太喜欢先看完整官方文档。总会碰到很多不懂的地方第一时间上网搜答案,就比如在uni-app模版看到的#ifdef MP,这是什么鬼?

    对于学过C语言的童鞋并不陌生,因为这是条件编译语句

    为什么会出现在uni-app里呢?因为uni-app的特性---一份代码,多平台运行。没错,就是一套代码,可以在android ios 各个小程序和h5上运行,因此为了代码简洁性引入的条件编译,

    #ifdef   #ifndef  #endif(其实官网介绍的也很详细)

    标准的语法

    // #ifdef %PLATFORM%
        %PLATFORM%为平台名称
        这里的内容只会编译在该平台
    // #endif

    可以看到其实以#ifdef开头 #endif结尾,但是注意一下就会发现前面双斜杠,这里是注释标记

    也就是说在各个代码块里的注释不一样,注释标记就要切换掉,比如

    js:  // #ifdef
    tag标签: <!--  #ifdef  -->
    css样式: /*  #ifdef  */

    解释一下语句是什么意思

    #ifdef :       if defined  仅在某个平台编译

    #ifndef :     if not defined  在除里该平台的其他编译

    #endif :       end if 结束条件编译

    %PLATFORM%       需要编译的平台,上面的MP就是各个小程序的意思

    uni-app支持的各个平台(下面官网copy过来的)

    平台 参考文档
    APP-PLUS 5+App HTML5+ 规范
    APP-PLUS-NVUE 5+App nvue Weex 规范
    H5 H5  
    MP-WEIXIN 微信小程序 微信小程序
    MP-ALIPAY 支付宝小程序 支付宝小程序
    MP-BAIDU 百度小程序 百度小程序
    MP-TOUTIAO 头条小程序 头条小程序
    MP-QQ QQ小程序 (目前仅cli版支持)
    MP 微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序  

    示例 如果只需要在微信小程序上编译某段代码的话

    // #ifdef MP-WEIXIN
        我是那个代码
    // #endif

     

    展开全文
  • 组件的基本使用: uni-app 提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接成自己的应用。 uni-app 中的组件,就像 HTML 中... 更多介绍参见:uni-app 官网 text 文本组件的用法: ......
  • uni-app是一个使用 Vue.js 开发跨平台应用的前端框架,使用hbuilder X可以快速将一套代码打包至最多7个平台。对于个人开发者,或者创业公司来说就是开发神器,省去了很多开发成本。下面就给大家介绍一下怎么快速上手...
  • 很多开发者在没有入坑uniapp之前,都想知道uniapp的体验到底怎么样,坑多不多?今天就以我个人开发的项目来谈一谈。 首先介绍一下我在公司开发的项目:购靓号APP、也有h5、购靓号小程序 关注公众号可以快速体验所有...
  • 什么是uni-app?

    2019-09-10 23:10:47
    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。 即使不跨端,uni-app同时也是更好的小程序开发...
  • uni-app入门

    2019-09-10 15:59:27
    一、uni-app简单介绍 什么是uni-app? uni-app 是使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台。 uni-app的优点 跨平台发行,运行体验更好 ...
  • 优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小...编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPo...
  • 最近在学习使用uniapp开发混合应用,在学习的过程中还是发现有很多坑的。很多东西都不是很全,需要自己一个一个去踩坑以及自己搜索答案。所以我决定从今天开始记录一下我在使用uniapp开发的过程遇到的问题以及解决...
  • uniapp动态修改标题

    2019-10-09 11:40:47
    uniapp作为一款开源软件,可以做到一端多用,不过也有局限,在开发中有时候需要动态的去修改标题,例如 多页面逻辑合成一个页面的时候 uniapp打包分为H5 小程序 和 APP(一般主要的是这三个) 下面贴上的代码,做...
  • uniapp指南第1章---如何创建一个uniapp项目简介环境创建uniapp项目 简介 uniapp是一个跨端应用,一套代码可以转换成app,小程序,H5,同时支持云开发。uniapp的写法与微信小程序非常类似,所以如果对微信小程序和vue...
  • 标题:付哥的技术课堂-uniapp从零快速开发到实践上线应用-15整体回顾并问题修改1 标题:付哥的技术课堂-uniapp从零快速开发到实践上线应用-15整体回顾并问题修改2 标题:付哥的技术课堂-uniapp从零快速开发到...
  • uniapp销毁addEventListener事件 ** 百度了很多vue的方法,结果都不适用,只好自己想办法,也是无关紧要的东西,不影响运行,但是看着心里都烦,有更好的解决方案欢迎指点 上报错信息 这是一个监听滚动的方法,离开...
  • uniapp 解决swiper滚动高度自适应问题 问题描述:使用的是uniapp 官网案例中的一个swiper插件(插件名:uni-swiper-dot),当需要tab滚动,但是它又只能在最外层的swiper处设置一个固定的高度,纠结很久以后,终于想...
1 2 3 4 5 ... 20
收藏数 26,247
精华内容 10,498
关键字:

uniapp