精华内容
下载资源
问答
  • uniapp项目

    2021-02-25 10:16:50
    uniapp介绍 uniapp官网 uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个...

    uniapp介绍

    uniapp官网
    在这里插入图片描述

    uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。
    DCloud公司拥有800万开发者用户,几十万应用案例、12亿手机端月活用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。
    uni-app在手,做啥都不愁。即使不跨端,uni-app也是更好的小程序开发框架(详见)、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目,你都可以快速交付,不需要转换开发思维、不需要更改开发习惯。

    HBuilderX

    HBuilderX:官方IDE下载地址
    在这里插入图片描述

    打开HBuilderX新建项目

    在这里插入图片描述
    在这里插入图片描述

    项目目录

    在这里插入图片描述
    运行到浏览器即可
    在这里插入图片描述

    组件选择

    我们在插件市场选择下载量大,文档清晰的组件使用
    网址
    在这里插入图片描述
    在这里插入图片描述

    安装 uView

    在这里插入图片描述

    使用

    参考文档使用组件即可
    在这里插入图片描述

    使用 uView 组件中Tabbar 底部导航栏

    我们想要底部导航栏有凸起效果,可以使用uView 组件中Tabbar 底部导航栏

    在这里插入图片描述

    结合教程,我们去使用vuex即可
    在这里插入图片描述

    安装vuex

    NPM
    npm install vuex --save
    #Yarn
    yarn add vuex

    新建store目录

    在这里插入图片描述

    定义数据

    在这里插入图片描述

    /**
     *  存放 tabbar数据
     * **/
    import * as types from '../mutation-type';
    const state = {
    	name: "",
    	tabbarList: [{
    			iconPath: "home",
    			selectedIconPath: "home-fill",
    			text: '首页',
    			count: 1,
    			isDot: true,
    			pagePath: "/pages/home/index"
    		},
    		{
    			iconPath: "/static/uview/example/component.png",
    			selectedIconPath: "/static/uview/example/component_select.png",
    			text: '组件',
    			count: 2,
    			isDot: true,
    			pagePath: "/pages/index/index"
    		},
    		{
    			iconPath: "/static/uview/example/js.png",
    			selectedIconPath: "/static/uview/example/js_select.png",
    			text: '工具',
    			midButton: true,
    			pagePath: "/pages/js/index"
    		},
    		{
    			iconPath: "/static/uview/example/template.png",
    			selectedIconPath: "/static/uview/example/template_select.png",
    			text: '模板',
    			pagePath: "/pages/template/index"
    		},
    		{
    			iconPath: "/static/uview/example/template.png",
    			selectedIconPath: "/static/uview/example/template_select.png",
    			text: '个人中心',
    			pagePath: "/pages/template/index"
    		},
    	]
    }
    // getters
    const getters = {
    	userInfo(state) {
    		return state.name;
    	},
    };
    
    // actions
    // 异步方法用actions
    // actions不能直接修改全局变量,需要调用commit方法来触发mutation中的方法
    const actions = {
    	login(context, payload) {
    		context.commit('login', payload);
    	},
    
    };
    
    // mutations
    const mutations = {};
    
    export default {
    	namespaced: true,
    	state,
    	getters,
    	actions,
    	mutations,
    };
    
    

    入口文件使用store

    import Vue from 'vue'
    import App from './App'
    import store from './store/index.js'
    Vue.config.productionTip = false
    
    App.mpType = 'app'
    
    // 引入全局uView
    import uView from 'uview-ui';
    Vue.use(uView);
    
    /* const app = new Vue({
        ...App
    }) */
    const app = new Vue({
    	store,
    	render:h => h(App)
    })
    app.$mount()
    
    

    组件中使用tabbar

    <template>
    	<view class="content">
    		<image class="logo" src="/static/uview/common/logo.png"></image>
    		<view class="text-area">
    			<text class="title">{{title}}</text>
    		</view>
    		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				title: '工具',
    				tabbar: ''
    			}
    		},
    		onLoad() {
    			this.tabbar = this.$store.getters.tabbarList;}
    	}
    </script>
    
    <style>
    	.content {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo {
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area {
    		display: flex;
    		justify-content: center;
    	}
    
    	.title {
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>
    
    

    tabbar效果

    在这里插入图片描述

    展开全文
  • uniapp项目源码示例房源系统uniapp项目源码示例房源系统
  • uniapp 项目项目地址 https://gitee.com/iszsq/doItMusic 参考项目 GitHub网易云音乐接口开源项目 Binaryify/NeteaseCloudMusicApi 项目介绍 1.0的版本中,主要探讨的是视频的上下滑动播放,和nvue原生组件解决...

    【2.0】doItMusic 基于网易云音乐

    uniapp 项目。

    项目地址

    https://gitee.com/iszsq/doItMusic


    参考项目

    GitHub网易云音乐接口开源项目
    Binaryify/NeteaseCloudMusicApi

    项目介绍

    1.0的版本中,主要探讨的是视频的上下滑动播放,和nvue原生组件解决视频层级过高问题。

    当前2.0版本的主要特点如下:

    1. 对接口进行进一步的封装,调用接口变得简单;
    2. 新增音乐播放界面,配合globalData全局变量,只维护一个audioContext上下文;
    3. 使用uniapp提供的动画接口编写动画;
    4. 配合vuex状态管理,监听音乐播放的状态数据;
    5. 引入音乐播放进度、缓存进度条监听;
    6. 解析歌曲的lrc歌词数据,一并展示;
    7. 基于沿用视频播放界面上下滑动切换;
    8. 引入搜索功能,综合、单曲、歌单、视频等;
    9. 解决微信小程序一些样式兼容问题,一些第三方组件、image都需要使用view组件包裹;

    项目描述

    看到了网易云接口的开源项目后,想配合做一个前端页面,顺便熟悉uniapp;这是一个基于uniapp开发的媒体类项目,比较小众,主要功能点是歌曲搜索;音乐、视频播放、规范化开发、以及animation动画的使用等等。因为需求受众较少,只是做学习用,可参考的地方还是有的,后续应该做一些业务需求广的项目。

    技术点

    1. sass - HBuilder X安装sass编译
    2. uView - 一套不错的兼容多端的ui框架
    3. vuex状态监听
    4. 音乐播放,uniapp animation动画
    5. lrc歌词解析
    6. 视频播放
    7. 搜索功能
    8. 等等…

    项目演示

    H5演示地址

    pc端查看按F12。演示地址

    扫码访问

    在这里插入图片描述

    项目预览

    这里展示微信小程序端,uniapp是多端兼容的,效果差不多
    

    首页

    搜索

    歌手介绍页

    在这里插入图片描述

    专辑/歌单

    音乐播放页

    视频播放页


    安装运行

    参考安装文档:https://blog.csdn.net/qq_40826978/article/details/114971270

    git clone https://gitee.com/iszsq/doItMusic.git
    cd doItMusic
    npm install 
    用 HBuilder X 导入项目,在工具内运行和打包
    
    展开全文
  • 我的uniapp 自己的uniapp项目,学习各种的vue知识点 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build
  • WebStorm创建uniapp项目

    2020-10-13 10:31:02
    WebStorm创建uniapp项目 我之前vue/cli是2.0的 npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project 下面语句编译 npm run dev:mp-weixin uniapp文档链接

    WebStorm创建uniapp项目

    我之前vue/cli是2.0的

    npm install -g @vue/cli
    
    vue create -p dcloudio/uni-preset-vue my-project
    

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    下面语句编译

    npm run dev:mp-weixin
    

    uniapp文档链接

    展开全文
  • Wepy项目转移到uniapp项目 (经过上网百度以及官网的学习、大概解决了、还有一些和服务端连接的问题没处理好) 一、 (vscode条件下实现的在hbuilderX也可以正常运行) 1.1 全局安装:npm install -g @vue/cli 1.2 ...

    Wepy项目转移到uniapp项目
    (经过上网百度以及官网的学习、大概解决了、还有一些和服务端连接的问题没处理好)
    一、 (vscode条件下实现的在hbuilderX也可以正常运行)
    1.1 全局安装:npm install -g @vue/cli
    1.2 通过cl创建uni-app项目:vue create -p dcloudio/uni-preset-vue my-project 后面可以选择模板,要是迁移选择默认比较好改动
    1.3 安装组件语法提示:npm i @dcloudio/uni-helper-json
    1.4 运行 npm run dev:%PLATFORM% %%里面可以是mp-weixin
    在这里插入图片描述

    二、uniapp中的page.json主要存放页面路径、gloabaldata、插件、分包1等信息,wepy中的app.wpy里面关于这些的可以手动迁移到page.json中
    pa page页面配置

    在这里插入图片描述 uniapp中 分包页面配置的格式(plugin是自己需要用到的插件可忽略)
    在这里插入图片描述 uniapp中 tabbar页面配置的格式
    三、 推荐官网的一个wepy-uniapp的转换器,可以将一些简单的wepy用法变成uniapp的vue的用法,其实第一步也可以直接用这个方法去将一的内容自动变成uniapp的格式,就是page页面需要改,因为它有点错误。但是用这个方法比自己动手去改更快
    2.1安装wepy into uniapp :$ npm install wepy-to-uniapp –g
    2.2升级wepy into uniapp:$ npm update wepy-to-uniapp –g
    2.3转换:etu -i ./xxapp -o ./miniprogramProject_uni 其中xxapp是我的wepy项目名称, mini是转换的uniapp的名称,更多用法看官网
    四、前三步骤大致解决了wepy转为uniapp的框架、三就来细扣一下代码吧
    4.1 先说一个错误容易犯的(我自己容易)
    在这里插入图片描述 此图是利用三提到的转化器转换得到的成果,这里有一个很大的问题

    在这里插入图片描述

    它比纯正的uniapp多了data,记得把return里面的data删掉,不然前端获取不到js里面的值!!!!
    4.2将js里面的wepy.getstorage等方法中的wepy改为uni
    4.3有的wx.showmodel的wx可以改为uni,但是有的不能改,于是博主我关于wx的都没有改成uni,这个问题待解决
    4.4wepy中调用全局变量用的是this.parent,unigetApp()this.parent,然而uni调用全局变量用的是getApp(),于是需要将this.parent全部更改成getApp().globaldata的方法
    4.5 wepy1.x需要this.apply()unithis.apply()去手动更新视图,然而uni不需要,可以将this.apply()删掉
    4.6存放图片的文件有asset变成了static,需要把图片迁移到static里面
    在这里插入图片描述

    4.7我觉得很重要的一部分是封装,wepy用到的wepy-async-function有对应的包可以引入,然而uni并没有。于是如果你没有注意到这个点,会一直报错(res.code is not defined等等很多undefined错误都是因为没有发现这个导致的,目前是这么觉得的),封装是用的promise封装,大致格式是这样的,在这里插入图片描述

    .和wepy的request的包引入方式没有区别:
    在这里插入图片描述

    4.8迁移成功啦!!!!啦啦啦开心我的这个也是最近迁移的,还没有完全成功,会在更新的,有错误欢迎和我说!!!互相进步哦!然后我还在学习wepy1.x升级到2.x的,如果有人成功的,希望和我交流一下,万分感谢!!!
    附:上几个学习参考的网站:

    1. http://www.zyiz.net/tech/detail-144285.html (wepy迁移uniapp实例) 2.https://blog.csdn.net/qq_39167934/article/details/106021002 (vs安装uniapp项目)
    2. https://www.npmjs.com/package/wepy-to-uniapp?activeTab=readme (wepy-into-uni官网教程)
    展开全文
  • uniapp项目商城开发全套-视频教程+视频源码+PPT讲义,高清视频教程,讲的很仔细学习UNIAPP编程不可多得好东西
  • 主要介绍了centos7.2搭建nginx的web服务器部署uniapp项目,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • uniapp指南第1章---如何创建一个uniapp项目简介环境创建uniapp项目 简介 uniapp是一个跨端应用,一套代码可以转换成app,小程序,H5,同时支持云开发。uniapp的写法与微信小程序非常类似,所以如果对微信小程序和vue...
  • uniapp项目开发踩坑篇

    2021-04-14 09:27:13
    uniapp项目开发踩坑篇 因为是第一次尝试使用uniapp开发app,对个平台兼容性不是很清楚,所以在开发过程中遇到了不少问题,特地来总结一下 存储机制 uni-app的localStorage在不同端的实现不同 H5端为localStorage,...
  • uniapp项目导航栏添加字体图标; 在uniapp项目中使用字体图标。 一、给uniapp项目导航栏添加字体图标 1:登录阿里巴巴矢量图标库:https://www.iconfont.cn/ 2:新建项目,添加任意图标 3:下载字体图标信息,并...
  • uniapp项目怎么连接手机调试

    千次阅读 2020-07-07 17:13:29
    1:新建一个uniapp项目,命名为test。 可以看到,在开发工具HBuilderX里面,极速生成的模板目录结构如下 打开pages底下的index.vue的组件,开始写代码了,把代码写好,这里随便写了一个例子。 <...
  • uniapp项目在微信和企业微信浏览器获取经纬度 uniapp项目在微信和企业微信浏览器获取经纬度 前段时间开发一个uniapp项目遇到了问题,在微信和企业微信没法调起获取地理位置的方法,uniapp官方方法uni.getLocation,...
  • Uniapp项目—商城分类页 如图: 具体代码: <template> <view> <view @click="aaa" class="search"> <view class="input"> <image src="../../../static/index/search...
  • uniapp项目回顾

    2020-08-07 17:31:44
    最近uniapp比较火,相较于其他跨平台的移动端框架来说,uniapp的能力范围是非常广的,uniapp支持各大厂家对的小程序、h5和app端(安卓和ios)。它类似微信小程序的文件架构,同时集成vue.js的代码风格让前端程序员...
  • vue-cli创建uniApp项目[vue-cli官网][https://cli.vuejs.org/zh/guide/installation.html][uniApp官网][https://uniapp.dcloud.io/]环境安装全局安装vue-clinpminstall-g@vue/cli创建UniAppvuecreate-pdcloudio/uni-...
  • uniapp项目 改造vue命令自动化编译查看官方文档了解结构原理 最近接手公司一个基于uniapp框架项目,公司部署项目采用的是Jenkins自动化部署,由于项目之前是在HBuilderX可视化新建的,每次部署都要手动编译打包,...
  • 1检查vue是否能在vscode的终端中显示指令 若不能出指令则进行问题处理,检查npm环境变量是否配置 若还出现:vue无法加载文件 C:\Users\XXX\... 2创建项目uniapp项目 https://ask.dcloud.net.cn/article/36286 ...
  • uniApp项目运行到开发者工具报错 如图 没有填写AppID 把你的AppId 填写到这里就可以了
  • 在做uniapp项目时由于vant组件小程序和h5组件是不通用的,所以vant组件在h5中要单独引用。 1.首先使用npm i @vant/weapp -S --production 安装vant的组件包,安装成功后结构目录如下 2.我们在全局中引用vant组件,...
  • uniapp项目需要改变swiper指示点的样式 问题描述: 使用uniapp组件库里面的swiper组件时,发现在组件内无法使用类名对swiper的指示点进行样式修改 原因分析: 组件内无法强制修改uniapp组件库的组件(emmmmm。。...
  • uniapp分包的方法在开放文档里有,有一定基础的小伙伴还是可以看懂的 uniapp分包 首先 我们在根目录下创建一个pagesB文件夹,用来放置需要分包的页面 下一步是把比较大的文件直接拉过去,pages里就没有这个文件了,...
  • uniAPP打包 ...uniAPP项目打包报错 当出现报错 出现这个报错的话 解决方法是 在文件夹当中 在mainfest.json中设置h5节点的publicPath为:’./'打包后即为相对路径 然后还是会报图片错误 具体修改方法
  • uniapp 项目汇总

    2020-07-09 11:31:15
    1.uniapp 各路由跳转的区别 uni.navigateTo 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面。 uni.redirectTo 关闭当前页面,跳转到应用内的某个页面。 uni.reLaunch 关闭所有页面...
  • 1、uniapp项目,遇到视频提示打包时未添加videoplayer模块 2、如果是云打包只需在manifest.json,模块权限配置中勾选即可。跳转官方文档 3、如果是使用Android离线打包则需要把 media-release.aar,weex_video...
  • uniApp项目搭建

    2020-09-18 10:57:47
    (2)、进入开发工具,然后新建一个项目,如图 (3)、配置微信小程序展示环境 首次会弹出小框(只需将微信开发者工具安装包所在路径放上去即可) (4)、可以安装插件(sass、git等等)(在工具插件安装里面...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,395
精华内容 958
关键字:

uniapp项目