HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uniapp离线打包和升级这样可以不???????????

离线打包 uniapp

Android试了下,将unpackage->dist->build->app-plus->appname 下面的文件全部打包压缩成wgt.
然后在程序里面检查wgt进行安装.发现UI会变动wgt里面的ui,具体没细看.IOS看.
有这样做的小伙伴么.

那么,
问题一:
离线打包,是不是可以直接用 unpackage下面的的资源 + 5+plus离线打包的壳自己打包,这个有没有啥问题.

问题二:
android 连结HX运行起来的UI和云端打包的UI居然不一致(居中和不居中的问题)??
Android是8.1.0.

问题三:
mac下面
HX 0.1.47.20180821-alpha 无法升级到 0.1.47.20180823-alpha
直接把应用程序里面的HX删掉,安装官网最新的0.1.47.20180823-alpha版本,打开还是HX 0.1.47.20180821-alpha.

继续阅读 »

Android试了下,将unpackage->dist->build->app-plus->appname 下面的文件全部打包压缩成wgt.
然后在程序里面检查wgt进行安装.发现UI会变动wgt里面的ui,具体没细看.IOS看.
有这样做的小伙伴么.

那么,
问题一:
离线打包,是不是可以直接用 unpackage下面的的资源 + 5+plus离线打包的壳自己打包,这个有没有啥问题.

问题二:
android 连结HX运行起来的UI和云端打包的UI居然不一致(居中和不居中的问题)??
Android是8.1.0.

问题三:
mac下面
HX 0.1.47.20180821-alpha 无法升级到 0.1.47.20180823-alpha
直接把应用程序里面的HX删掉,安装官网最新的0.1.47.20180823-alpha版本,打开还是HX 0.1.47.20180821-alpha.

收起阅读 »

我录制的thinkcmfapi+mui+vue开发新闻APP课程发布啦!

视频教程

https://study.163.com/course/introduction/1005948017.htm?utm_source=qq&utm_medium=webShare&utm_campaign=share&utm_content=courseIntro&share=2&shareId=400000000587019 全是干货。望支持

继续阅读 »

https://study.163.com/course/introduction/1005948017.htm?utm_source=qq&utm_medium=webShare&utm_campaign=share&utm_content=courseIntro&share=2&shareId=400000000587019 全是干货。望支持

收起阅读 »

[插件分享] indexlist 插件分享,原创,好用

uniapp 插件 uniapp插件

工作中用到了indexlist 的需求,可官方不知道什么时候才移植这个插件,所以自己写了个,有问题欢迎反馈

1、使用方法
首先引入组件,然后在template里面使用,传入值和填写回调行数就行

2、组件接受的值
iscull 是否需要转换为标准格式,标准格式是 {A:{...},B:{...}} 非标准格式是指 [{...},{....}] , 请看好数据格式,格式不对会报错
showtext 在indexlist里面显示出来的内容 列如:[{name:'啊啊啊',py:'aaa'}] :showtext="'name'" indexlist就会显示啊啊啊
py 在indexlist里面用来搜索时指定的key,用法和showtext 一样
title indexlist 显示的标题
list indexlist 的值,只支持标准格式和非标准格式,否则报错

3、回调
result 组件的回调方法,选择indexlist的值后回调的函数 @result="resultFn"

4、组件方法
show() 显示组件
hide() 隐藏组件

5、案例
github

6、截图

继续阅读 »

工作中用到了indexlist 的需求,可官方不知道什么时候才移植这个插件,所以自己写了个,有问题欢迎反馈

1、使用方法
首先引入组件,然后在template里面使用,传入值和填写回调行数就行

2、组件接受的值
iscull 是否需要转换为标准格式,标准格式是 {A:{...},B:{...}} 非标准格式是指 [{...},{....}] , 请看好数据格式,格式不对会报错
showtext 在indexlist里面显示出来的内容 列如:[{name:'啊啊啊',py:'aaa'}] :showtext="'name'" indexlist就会显示啊啊啊
py 在indexlist里面用来搜索时指定的key,用法和showtext 一样
title indexlist 显示的标题
list indexlist 的值,只支持标准格式和非标准格式,否则报错

3、回调
result 组件的回调方法,选择indexlist的值后回调的函数 @result="resultFn"

4、组件方法
show() 显示组件
hide() 隐藏组件

5、案例
github

6、截图

收起阅读 »

精选DCloud HBuilder开发视频教程

HBuilder

本教程适合小白,入门,进阶三种不同类型的同学观看
小白请先看:html5+css3视频教程,这是开发必须要学习的基础知识,合理安排观看时间;
入门级别的大白菜请观看:DCloud HBuilder开发WEB移动APP基础入门视频教程;
进阶级别的大神请观看:实战教程并配合着学习资料,练习资料一同观看。

下载地址:http://www.sucaihuo.com/video/390.html

继续阅读 »

本教程适合小白,入门,进阶三种不同类型的同学观看
小白请先看:html5+css3视频教程,这是开发必须要学习的基础知识,合理安排观看时间;
入门级别的大白菜请观看:DCloud HBuilder开发WEB移动APP基础入门视频教程;
进阶级别的大神请观看:实战教程并配合着学习资料,练习资料一同观看。

下载地址:http://www.sucaihuo.com/video/390.html

收起阅读 »

uniapp 选择组件,包含一级,二级级联,三级级联

uniapp插件

一级选择
2级选择
3级选择

github:github

已知问题:

  1. 不能与页面下拉一起使用
  2. 滑动选择后,scroll-view指定scrollTop时,scrollview滚动会有500ms左右的延迟(官方help),现在加了个loaing

参数说明:
show(类型:Boolean,默认 false):控制组件显示隐藏

list(类型:Array):选择器绑定的数据

type(类型:Number,取值1,2,3):选择器类型 1为一级选择 2为二级级联选择 3为三级级联选择

name(类型:String,默认:'name'):选择器显示的文本信息,为list中的某个key

children(类型:String,默认:'children'):级联选择器中下级选择器从上级选择器获取数据时所使用的key,为list中的某个key

callBackFun:回调方法,回调参数类型:Array,一级选择器确定后的回调值为Array[0],Array[0]为所选项的Object
二级选择器确定后的回调值为Array[0,1],Array[0]为所选第一项的Object,Array[1]为所选第二项的Object
三级选择器确定后的回调值为Array[0,1,2],Array[0]为所选第一项的Object,Array[1]为所选第二项的Object,Array[2]为所选第二项的
Object
详细使用方法见demo

继续阅读 »

一级选择
2级选择
3级选择

github:github

已知问题:

  1. 不能与页面下拉一起使用
  2. 滑动选择后,scroll-view指定scrollTop时,scrollview滚动会有500ms左右的延迟(官方help),现在加了个loaing

参数说明:
show(类型:Boolean,默认 false):控制组件显示隐藏

list(类型:Array):选择器绑定的数据

type(类型:Number,取值1,2,3):选择器类型 1为一级选择 2为二级级联选择 3为三级级联选择

name(类型:String,默认:'name'):选择器显示的文本信息,为list中的某个key

children(类型:String,默认:'children'):级联选择器中下级选择器从上级选择器获取数据时所使用的key,为list中的某个key

callBackFun:回调方法,回调参数类型:Array,一级选择器确定后的回调值为Array[0],Array[0]为所选项的Object
二级选择器确定后的回调值为Array[0,1],Array[0]为所选第一项的Object,Array[1]为所选第二项的Object
三级选择器确定后的回调值为Array[0,1,2],Array[0]为所选第一项的Object,Array[1]为所选第二项的Object,Array[2]为所选第二项的
Object
详细使用方法见demo

收起阅读 »

view标签相当于div或p标签,text相当于span标签

uniapp

刚才我有个疑问,我想使用html中的p标签,然后用了text标签发现不换行,然后纠结了一下怎么办,然后发现可以用view标签,

小白问题,但也记录一下 嘿嘿

刚才我有个疑问,我想使用html中的p标签,然后用了text标签发现不换行,然后纠结了一下怎么办,然后发现可以用view标签,

小白问题,但也记录一下 嘿嘿

使用uni-app 制作的APP

uni_app

感谢dcloud 这么好的工具 一下做出安卓 ios 小程序

之前做过一个微信小程序。不知为何最近访问不了
很早以前下了HBUDERX 是13M那个 这次下的完全版
看到UNI-APP 所以有时间从做一下了
玩了一下uni制作的APP 和小程序 快应用 
说下流畅度对比排列顺序 原生(COCOSAPP)-〉快应用 -〉(uni-app & 小程序)

希望UNP-APP发布快应用。这个一个链接就可以打开应用太好用了 不知道以后H5网页可以用原生APP不

成品地址
http://m3w.cn/cpuml 

继续阅读 »

感谢dcloud 这么好的工具 一下做出安卓 ios 小程序

之前做过一个微信小程序。不知为何最近访问不了
很早以前下了HBUDERX 是13M那个 这次下的完全版
看到UNI-APP 所以有时间从做一下了
玩了一下uni制作的APP 和小程序 快应用 
说下流畅度对比排列顺序 原生(COCOSAPP)-〉快应用 -〉(uni-app & 小程序)

希望UNP-APP发布快应用。这个一个链接就可以打开应用太好用了 不知道以后H5网页可以用原生APP不

成品地址
http://m3w.cn/cpuml 

收起阅读 »

uni-app 侧边导航分类,适合商品分类页面

uniapp插件

uni-app 侧边导航分类,适合商品分类页面

github:github

示例图

继续阅读 »

uni-app 侧边导航分类,适合商品分类页面

github:github

示例图

收起阅读 »

基于 MUI 构建一个具有 90 +页面的APP应用

mui

前言

mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本,
但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,难免会浪费很多时间在踩坑上。

该项目以mui为开发框架,artTemplate.js作为js模版引擎,没有繁琐的配置和编译过程,拿来就可以上手,适合刚接触mui的同学参考和学习

项目地址,如遇网络不佳,请移步国内镜像加速节点

项目运行


git clone https://github.com/EasyTuan/mui-kidApp.git  

国内镜像加速节点  
git clone git@gitee.com:easytuan/mui-kidApp.git  

打开HBuider,打开项目

右键项目=>转换为移动App

运行=>真机运行(需要usb连接手机)

注:服务器到期,接口服务不再支持,能正常登陆和退出,不影响正常功能但预览和学习

目标功能

  • [x] 定位功能 -- 完成
  • [x] 选择城市 -- 完成
  • [x] 展示所选地址附近商家列表 -- 完成
  • [x] 在高德地图中寻找店铺 -- 完成
  • [x] 搜索文章,赛事 -- 完成
  • [x] 商家列表页 -- 完成
  • [x] 店铺评价页面 -- 完成
  • [x] 单张卡牌详情页面 -- 完成
  • [x] 商家详情页 -- 完成
  • [x] 登录、注册 -- 完成
  • [x] 三方微信、QQ登陆 -- 完成
  • [x] 修改密码 -- 完成
  • [x] 个人中心 -- 完成
  • [x] 发送短信、语音验证 -- 完成
  • [x] 赛事列表 -- 完成
  • [x] 赛事详情 -- 完成
  • [x] 添加、删除、修改收货地址 -- 完成
  • [x] 帐户信息 -- 完成
  • [x] 服务中心 -- 完成
  • [x] 红包 -- 完成
  • [x] 上传头像 -- 完成
  • [x] 卡牌对战发起 -- 完成

业务介绍

入口地址为 html/main.html

目录结构

├── css                     //css样式文件  
├── fonts                   //字体图标  
├── html                        //页面  
├── images                  //图片  
├── js                      //js  
│    └── lib                        //js第三方库  
├── unpackage               //App图标、启动页  
└── manifest.json           //App配置文件  

说明

如果对您有帮助,您可以点击项目 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR

友情链接

该项目基于Ionic3.x的实现

继续阅读 »

前言

mui是一款接近原生App体验的前端框架,只需要掌握前端技术就可以开发APP应用,官方有提供功能比较全面的demo版本,
但在实战中总会遇到一些不可避免但坑,对于没有接触过mui的开发者,难免会浪费很多时间在踩坑上。

该项目以mui为开发框架,artTemplate.js作为js模版引擎,没有繁琐的配置和编译过程,拿来就可以上手,适合刚接触mui的同学参考和学习

项目地址,如遇网络不佳,请移步国内镜像加速节点

项目运行


git clone https://github.com/EasyTuan/mui-kidApp.git  

国内镜像加速节点  
git clone git@gitee.com:easytuan/mui-kidApp.git  

打开HBuider,打开项目

右键项目=>转换为移动App

运行=>真机运行(需要usb连接手机)

注:服务器到期,接口服务不再支持,能正常登陆和退出,不影响正常功能但预览和学习

目标功能

  • [x] 定位功能 -- 完成
  • [x] 选择城市 -- 完成
  • [x] 展示所选地址附近商家列表 -- 完成
  • [x] 在高德地图中寻找店铺 -- 完成
  • [x] 搜索文章,赛事 -- 完成
  • [x] 商家列表页 -- 完成
  • [x] 店铺评价页面 -- 完成
  • [x] 单张卡牌详情页面 -- 完成
  • [x] 商家详情页 -- 完成
  • [x] 登录、注册 -- 完成
  • [x] 三方微信、QQ登陆 -- 完成
  • [x] 修改密码 -- 完成
  • [x] 个人中心 -- 完成
  • [x] 发送短信、语音验证 -- 完成
  • [x] 赛事列表 -- 完成
  • [x] 赛事详情 -- 完成
  • [x] 添加、删除、修改收货地址 -- 完成
  • [x] 帐户信息 -- 完成
  • [x] 服务中心 -- 完成
  • [x] 红包 -- 完成
  • [x] 上传头像 -- 完成
  • [x] 卡牌对战发起 -- 完成

业务介绍

入口地址为 html/main.html

目录结构

├── css                     //css样式文件  
├── fonts                   //字体图标  
├── html                        //页面  
├── images                  //图片  
├── js                      //js  
│    └── lib                        //js第三方库  
├── unpackage               //App图标、启动页  
└── manifest.json           //App配置文件  

说明

如果对您有帮助,您可以点击项目 "Star" 支持一下 谢谢! ^_^

或者您可以 "follow" 一下,我会不断开源更多的有趣的项目

如有问题请直接在 Issues 中提,或者您发现问题并有非常好的解决方案,欢迎 PR

友情链接

该项目基于Ionic3.x的实现

收起阅读 »

uniapp自定义底部导航,带凸起

uniapp uniapp插件

使用swipe组件实现左右切换页面.
github:自定义底部导航
示例图

继续阅读 »

使用swipe组件实现左右切换页面.
github:自定义底部导航
示例图

收起阅读 »

mpvue项目(组件)迁移指南、示例及资源汇总

uniapp mpvue uniapp插件

首先,为什么要从mpvue转uni-app?
因为uni-app对vue语法支持更全面(如支持过滤器)、性能更高(尤其是组件较多的复杂页面)、包体积更小(因为mpvue把公共组件会编译到每一个页面里)、支持平台更多(支持H5和App)、生态更完善(uni-app插件市场有数千个插件)。
这里有详细的跑分和评测,比较了uni-app、mpvue、taro等框架,https://juejin.im/post/5ca1736af265da30ae314248

然后进入正题。

uni-app与mpvue,都是使用vue语法开发小程序。从语法支持度来讲,mpvue是uni-app的子集。
所以mpvue开发的小程序可不用改代码可直接变为uni-app。
但需要修改工程配置,可以参考以下教程手动移植。

项目迁移

  1. HBuilderX里新建默认模板的uni-app项目,或者使用cli创建,在全局安装vue后,可执行vue create -p dcloudio/uni-preset-vue my-project 创建工程。详见
  2. 如果是cli创建,那工程结构基本相同。对应复制页面文件即可。可跳过下面的第3步。
  3. 如果在HBuilderX创建的项目,它的src是根目录,此时将mpvue项目src目录内的文件拷贝到uni-app项目。(参考下图)
  4. 建立页面配置,根据原项目的app.json或者main.js内的页面配置填写pages.json的内容,并删除原来的页面配置。如果项目未手动配置所有页面,需要根据pages目录内的页面手动增加页面信息。每个页面单独的配置从相关页面的main.json文件或者main.js文件内拷贝,并删除原有配置。
  5. 修改页面文件名称,删除每个页面的main.js和main.json文件,并将页面名称修改为main.vue。
  6. 静态资源拷贝,将原项目static目录拷贝到uni-app项目,查找页面和组件内对资源的引用,检查并修正路径。
  7. 手动安装package.json文件dependencies节点下的模块(忽略mpvue、vuex、flyio,这些已经内置在uni-app内),安装方式可参考参考社区文章:uni-app引用npm第三方库可直接使用npm管理依赖:NPM支持

组件复用

一般的单文件组件可直接拷贝到项目内复用,微信小程序自定义组件放置到wxcomponents 目录,具体参考,使用npm包管理的组件参考npm模块的复用方式安装到本地。

Mpvue专有api的处理

mpvue有些自己的api,

  • 比如e.mp.touches[0],推荐改为标准的e.touches[0]。如果不改,也能兼容运行。
  • 还有一些比如mpvue.request,需要改为uni.request。如果之前的写法是wx.request,则不用改,uni-app直接兼容wx写法。

注意事项

  • 标签方面,不需要把div改成view,编译器会自动转。
  • 手动安装的模块需要使用相对路径引入
  • 手动安装的模块版本要和原项目要求一致
  • 手动安装的模块的依赖要一并安装。
  • uni-app强化了条件编译以适合多端发布,这是mpvue没有的重要功能,具体参考
  • mpvue相当于uni-app的模板编译模式,或称为非自定义组件编译模式,和自定义组件模式还有差异,差异详见:https://ask.dcloud.net.cn/article/35843 。另外非自定义组件模式,因为性能不好,已经被淘汰。详见https://ask.dcloud.net.cn/article/36385

移植示例

  • uni-one
    注意该示例是非自定义组件模式。

附录:mpvue开源资源集合

三方ui库:

注意这些mpvue的ui库,只能跨微信小程序和app,无法跨到h5和支付宝百度头条小程序。真正7端全跨的ui库参考这里:https://ask.dcloud.net.cn/article/35489

模板、示例工程

IT之家 资讯模板
仿美团示例
todolist
豆瓣电影示例
CNode论坛示例
vue-mpvue-ChatRobot聊天机器人
mpvue-jithub Mini program for Github
外卖小程序 Demo
blog
微信小程序商城
公交查询
H5 和 微信小程序同时开发 数独游戏
截屏分享,分享小程序时,当前页面都需要截屏
云盘示例
校园助手示例
表情包斗图
个税计算器
计算器
思思天气
天气预报
图片加工、贴纸
仿网易严选商城
仿优酷
仿微博
A Podcast miniprogram project, 一款播课类小程序
仿ONE(mpvue+vue)
仿追书神器的小说阅读器
电影票销售示例-卖座网
俄罗斯方块
开眼视频
房地产中介
多人在线画布
智能家居
摇骰子辅助工具
萝卜手帐
查快递
生僻字识别
扫码书单
语文答题闯关
仿米家电商
日历
仿滴滴
仿网易云UImusic播放器
调用网易云音乐api的播放器
i-music
商户o2o示例
豆瓣评分
仿扎克新闻

继续阅读 »

首先,为什么要从mpvue转uni-app?
因为uni-app对vue语法支持更全面(如支持过滤器)、性能更高(尤其是组件较多的复杂页面)、包体积更小(因为mpvue把公共组件会编译到每一个页面里)、支持平台更多(支持H5和App)、生态更完善(uni-app插件市场有数千个插件)。
这里有详细的跑分和评测,比较了uni-app、mpvue、taro等框架,https://juejin.im/post/5ca1736af265da30ae314248

然后进入正题。

uni-app与mpvue,都是使用vue语法开发小程序。从语法支持度来讲,mpvue是uni-app的子集。
所以mpvue开发的小程序可不用改代码可直接变为uni-app。
但需要修改工程配置,可以参考以下教程手动移植。

项目迁移

  1. HBuilderX里新建默认模板的uni-app项目,或者使用cli创建,在全局安装vue后,可执行vue create -p dcloudio/uni-preset-vue my-project 创建工程。详见
  2. 如果是cli创建,那工程结构基本相同。对应复制页面文件即可。可跳过下面的第3步。
  3. 如果在HBuilderX创建的项目,它的src是根目录,此时将mpvue项目src目录内的文件拷贝到uni-app项目。(参考下图)
  4. 建立页面配置,根据原项目的app.json或者main.js内的页面配置填写pages.json的内容,并删除原来的页面配置。如果项目未手动配置所有页面,需要根据pages目录内的页面手动增加页面信息。每个页面单独的配置从相关页面的main.json文件或者main.js文件内拷贝,并删除原有配置。
  5. 修改页面文件名称,删除每个页面的main.js和main.json文件,并将页面名称修改为main.vue。
  6. 静态资源拷贝,将原项目static目录拷贝到uni-app项目,查找页面和组件内对资源的引用,检查并修正路径。
  7. 手动安装package.json文件dependencies节点下的模块(忽略mpvue、vuex、flyio,这些已经内置在uni-app内),安装方式可参考参考社区文章:uni-app引用npm第三方库可直接使用npm管理依赖:NPM支持

组件复用

一般的单文件组件可直接拷贝到项目内复用,微信小程序自定义组件放置到wxcomponents 目录,具体参考,使用npm包管理的组件参考npm模块的复用方式安装到本地。

Mpvue专有api的处理

mpvue有些自己的api,

  • 比如e.mp.touches[0],推荐改为标准的e.touches[0]。如果不改,也能兼容运行。
  • 还有一些比如mpvue.request,需要改为uni.request。如果之前的写法是wx.request,则不用改,uni-app直接兼容wx写法。

注意事项

  • 标签方面,不需要把div改成view,编译器会自动转。
  • 手动安装的模块需要使用相对路径引入
  • 手动安装的模块版本要和原项目要求一致
  • 手动安装的模块的依赖要一并安装。
  • uni-app强化了条件编译以适合多端发布,这是mpvue没有的重要功能,具体参考
  • mpvue相当于uni-app的模板编译模式,或称为非自定义组件编译模式,和自定义组件模式还有差异,差异详见:https://ask.dcloud.net.cn/article/35843 。另外非自定义组件模式,因为性能不好,已经被淘汰。详见https://ask.dcloud.net.cn/article/36385

移植示例

  • uni-one
    注意该示例是非自定义组件模式。

附录:mpvue开源资源集合

三方ui库:

注意这些mpvue的ui库,只能跨微信小程序和app,无法跨到h5和支付宝百度头条小程序。真正7端全跨的ui库参考这里:https://ask.dcloud.net.cn/article/35489

模板、示例工程

IT之家 资讯模板
仿美团示例
todolist
豆瓣电影示例
CNode论坛示例
vue-mpvue-ChatRobot聊天机器人
mpvue-jithub Mini program for Github
外卖小程序 Demo
blog
微信小程序商城
公交查询
H5 和 微信小程序同时开发 数独游戏
截屏分享,分享小程序时,当前页面都需要截屏
云盘示例
校园助手示例
表情包斗图
个税计算器
计算器
思思天气
天气预报
图片加工、贴纸
仿网易严选商城
仿优酷
仿微博
A Podcast miniprogram project, 一款播课类小程序
仿ONE(mpvue+vue)
仿追书神器的小说阅读器
电影票销售示例-卖座网
俄罗斯方块
开眼视频
房地产中介
多人在线画布
智能家居
摇骰子辅助工具
萝卜手帐
查快递
生僻字识别
扫码书单
语文答题闯关
仿米家电商
日历
仿滴滴
仿网易云UImusic播放器
调用网易云音乐api的播放器
i-music
商户o2o示例
豆瓣评分
仿扎克新闻

收起阅读 »