HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app简易富文本编辑器(不是基于markdown)

uniapp插件 uniapp

git地址

(此编辑器仅适用移动端,chrome请按F12模拟手机设备进行浏览)
demo

说明:打包为h5需要进入项目根目录执行
npm init
npm install
安装颜色选择器插件,如无需打包为H5可忽略

上传视频及文件需要传入上传地址给组件,详情见DEMO(注意H5版本的跨域问题)。

具体用法见代码,本插件仅提供了一下思路,可根据自己的需求再进行修改。
截图:

1

2

继续阅读 »

git地址

(此编辑器仅适用移动端,chrome请按F12模拟手机设备进行浏览)
demo

说明:打包为h5需要进入项目根目录执行
npm init
npm install
安装颜色选择器插件,如无需打包为H5可忽略

上传视频及文件需要传入上传地址给组件,详情见DEMO(注意H5版本的跨域问题)。

具体用法见代码,本插件仅提供了一下思路,可根据自己的需求再进行修改。
截图:

1

2

收起阅读 »

MUI框架制作的汽车4S店网站模板分享

mui


一款基于MUI框架制作的蓝色美观的汽车4S店网站模板,可以用来做汽车美容维修微网站模板等

下载地址:http://www.sucaihuo.com/templates/2081.html
需要积分的朋友,签到评论可以免费获取积分下载

继续阅读 »


一款基于MUI框架制作的蓝色美观的汽车4S店网站模板,可以用来做汽车美容维修微网站模板等

下载地址:http://www.sucaihuo.com/templates/2081.html
需要积分的朋友,签到评论可以免费获取积分下载

收起阅读 »

HBuilderXCSS文件格式化成一行

HBuilderX css 格式化

为更便于阅读和书写,习惯将CSS文件中的规则定义块格式化在一行,在DCloud问答中找到这篇(CSS 格式化成一行一条),不过这种改组件源码的方式显然不是很适合。

经过简单了解在HBuilderx中可以通过简单配置实现。步骤如下:

1.工具 --> 插件配置 --> format --> jsbeautifyrc.js,在打开的options中添加如下代码:

"css": {  
    "newline_between_rules": false,  
    "selector_separator_newline": false,  
    "preserve_newlines": false  
}

  1. 保存后在到CSS文件中Ctrl+A选中所有内容,Ctrl+Shift+K合并为一行,然后Ctrl+K格式化试试是否符合预期。

本机格式话后的效果如附件图所示。本机使用的HBuilderx版本为:1.1.0.20181030

继续阅读 »

为更便于阅读和书写,习惯将CSS文件中的规则定义块格式化在一行,在DCloud问答中找到这篇(CSS 格式化成一行一条),不过这种改组件源码的方式显然不是很适合。

经过简单了解在HBuilderx中可以通过简单配置实现。步骤如下:

1.工具 --> 插件配置 --> format --> jsbeautifyrc.js,在打开的options中添加如下代码:

"css": {  
    "newline_between_rules": false,  
    "selector_separator_newline": false,  
    "preserve_newlines": false  
}

  1. 保存后在到CSS文件中Ctrl+A选中所有内容,Ctrl+Shift+K合并为一行,然后Ctrl+K格式化试试是否符合预期。

本机格式话后的效果如附件图所示。本机使用的HBuilderx版本为:1.1.0.20181030

收起阅读 »

打开外部链接 内嵌入

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>APP版本更新</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="../css/mui.min.css">   
    </head>   
    <body>    
        <header class="mui-bar mui-bar-nav">           
              <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>   
                <h1 class="mui-title"> APP版本更新</h1>  
        </header>       
    <script src="../js/mui.min.js"></script>   
    </body>   

<script>   
    mui.init({});   
    mui.plusReady(function() {  
         var urls="http://www.baidu.com/";    

        var ws=plus.webview.currentWebview();  
        var embed=plus.webview.create(urls,'embed',{top:'45px',bottom:'0px'});//创建页面  

        ws.append(embed);    
        embed.addEventListener('loaded',function(){  //监听页面,当页面加载完成时  
                plus.nativeUI.closeWaiting();  
        },false);  
        embed.addEventListener('loading',function(){//监听页面,当页面加载时  
                  plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});  
        },false);  

    })  

</script>  

</html>
继续阅读 »
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">  
        <title>APP版本更新</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <link rel="stylesheet" href="../css/mui.min.css">   
    </head>   
    <body>    
        <header class="mui-bar mui-bar-nav">           
              <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>   
                <h1 class="mui-title"> APP版本更新</h1>  
        </header>       
    <script src="../js/mui.min.js"></script>   
    </body>   

<script>   
    mui.init({});   
    mui.plusReady(function() {  
         var urls="http://www.baidu.com/";    

        var ws=plus.webview.currentWebview();  
        var embed=plus.webview.create(urls,'embed',{top:'45px',bottom:'0px'});//创建页面  

        ws.append(embed);    
        embed.addEventListener('loaded',function(){  //监听页面,当页面加载完成时  
                plus.nativeUI.closeWaiting();  
        },false);  
        embed.addEventListener('loading',function(){//监听页面,当页面加载时  
                  plus.nativeUI.showWaiting('',{style:'black',modal:false,background:'rgba(0,0,0,0)'});  
        },false);  

    })  

</script>  

</html>
收起阅读 »

uni-app H5跨域问题解决方案(CORS、Cross-Origin)

跨域请求 跨域

什么是跨域

跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码,请求了B站点的数据,就是跨域。
A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行)、相同域名、和相同端口号(port)。

如果你是做App、小程序等非H5平台,是不涉及跨域问题的。
稍微例外的是iOS的wkWebview,在5+App,或uni-app的web-view组件及renderjs中,由于WKWebview限制也会产生跨域,这方面另见专题文章:https://ask.dcloud.net.cn/article/36348。uni-app在App的普通js代码不运行在Webview下,不存在跨域问题。

由于uni-app是标准的前后端分离模式,开发h5应用时如果前端代码和后端接口没有部署在同域服务器,就会被浏览器报跨域。

如果前端要callfunction连接unicloud云函数

在h5页面里callfunction会跨域,此时需在unicloud的web控制台配置域名白名单,被加白的域名可以跨域callfunction。详见:https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=useinh5

另外运行期间在HBuilderX的内置浏览器里是不存在跨域的。

如果前端要连接传统后台服务器

分部署时的跨域方案和调试时的跨域方案,具体见下:

部署时的跨域解决方案

  • 方案1:最利索的,当然还是将前端代码和后端接口部署在同域的web服务器上
  • 方案2:由后台服务器配置策略,设为允许跨域访问。

例如:前端页面部署在uniCloud的前端页面托管里,但是需要访问自己服务器的接口,这时候需要在服务端允许前端页面托管的域名跨域访问。不同的服务端框架允许跨域的配置不一样,这里不再一一列举仅以eggjs为例。

(1)安装egg-cors包

npm i egg-cors --save

(2)在plugin.js中设置开启cors

exports.cors = {  
  enable: true,  
  package: 'egg-cors',  
};

(3)在config.default.js中配置

config.security = {  
  domainWhiteList: [ '前端网页托管的域名' ],  
};

调试时的跨域解决方案

前端工程师调试时,运行起来的前端代码在uni-app自带的web服务器中,而不是部署在后台业务服务器上,此时就会遇到跨域。
除了协调后端配置允许跨域,其实也可以自己解决跨域问题。共3种方案可选。

方案1 使用HBuilderX内置浏览器

这个内置浏览器经过官方处理,不存在跨域问题,简单易用,推荐使用。(需HBuilderX 2.6以上)
在打开页面后,点HBuilderX右上角的预览,即可打开内部浏览器。或者在运行菜单里选择运行到内置浏览器也可以。

方案2 配置webpack-dev-server代理

下面是一篇比uni官网文档更详细的配置指南,这里就直接贴地址了:https://juejin.im/post/5e43b2645188254902765766

方案3 给浏览器安装跨域插件,禁止浏览器报跨域

本插件并非万能,请仔细阅读与学习浏览器安全策略相关知识,不懂这些知识在评论里瞎喷的,官方不会回复。

当我们使用谷歌浏览器调试ajax请求的时候可能会遇到这两个问题:

  • 跨域资源共享 详见:CORS
  • 跨源读取阻塞 详见:CORB

最常见的就是关于跨域资源共享的问题,也就是我们通常说的跨域。当我们本地服务器预览页面,使用ajax访问远程服务器的内容时就会请求失败,比如:本地预览的地址是:http://localhost:8080/,访问的接口地址是http://dcloud.io/api。

如果仅仅是为了本地预览,可以使用Chrome浏览器插件来协助调试。
!!! 本插件只能解决简单请求的跨域调试(点击搜索什么是简单请求)。对于非简单请求的OPTION预检(点击搜索什么是预检请求)以及线上服务器也有跨域需求的用户,可以服务端配合解决

Chrome插件名称:Allow-Control-Allow-Origin: *

安装方式:

  1. 将下载的扩展插件拖入扩展管理页面

使用方式

  1. 打开待调试的页面
  2. 在扩展栏目找到安装的插件,点击打开插件配置
  3. 输入想要进行跨域调试的接口的地址,点击添加即可

注意事项

  • 此插件适合本地调试使用,线上部署如果和接口不同域还需要服务端配合。
  • 如果实际响应的内容与浏览器预期的内容有差异还可能被CORB策略所阻止。

firefox跨域插件

firefox跨域插件(注意firefox的css兼容问题)

其他历史问题

HBuilderX 2.3.0版在某些情况下会报跨域,请升级2.3.1+解决

继续阅读 »

什么是跨域

跨域是浏览器的专用概念,指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码,请求了B站点的数据,就是跨域。
A和B要想被认为是同域,则必须有相同的协议(比如http和https就不行)、相同域名、和相同端口号(port)。

如果你是做App、小程序等非H5平台,是不涉及跨域问题的。
稍微例外的是iOS的wkWebview,在5+App,或uni-app的web-view组件及renderjs中,由于WKWebview限制也会产生跨域,这方面另见专题文章:https://ask.dcloud.net.cn/article/36348。uni-app在App的普通js代码不运行在Webview下,不存在跨域问题。

由于uni-app是标准的前后端分离模式,开发h5应用时如果前端代码和后端接口没有部署在同域服务器,就会被浏览器报跨域。

如果前端要callfunction连接unicloud云函数

在h5页面里callfunction会跨域,此时需在unicloud的web控制台配置域名白名单,被加白的域名可以跨域callfunction。详见:https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=useinh5

另外运行期间在HBuilderX的内置浏览器里是不存在跨域的。

如果前端要连接传统后台服务器

分部署时的跨域方案和调试时的跨域方案,具体见下:

部署时的跨域解决方案

  • 方案1:最利索的,当然还是将前端代码和后端接口部署在同域的web服务器上
  • 方案2:由后台服务器配置策略,设为允许跨域访问。

例如:前端页面部署在uniCloud的前端页面托管里,但是需要访问自己服务器的接口,这时候需要在服务端允许前端页面托管的域名跨域访问。不同的服务端框架允许跨域的配置不一样,这里不再一一列举仅以eggjs为例。

(1)安装egg-cors包

npm i egg-cors --save

(2)在plugin.js中设置开启cors

exports.cors = {  
  enable: true,  
  package: 'egg-cors',  
};

(3)在config.default.js中配置

config.security = {  
  domainWhiteList: [ '前端网页托管的域名' ],  
};

调试时的跨域解决方案

前端工程师调试时,运行起来的前端代码在uni-app自带的web服务器中,而不是部署在后台业务服务器上,此时就会遇到跨域。
除了协调后端配置允许跨域,其实也可以自己解决跨域问题。共3种方案可选。

方案1 使用HBuilderX内置浏览器

这个内置浏览器经过官方处理,不存在跨域问题,简单易用,推荐使用。(需HBuilderX 2.6以上)
在打开页面后,点HBuilderX右上角的预览,即可打开内部浏览器。或者在运行菜单里选择运行到内置浏览器也可以。

方案2 配置webpack-dev-server代理

下面是一篇比uni官网文档更详细的配置指南,这里就直接贴地址了:https://juejin.im/post/5e43b2645188254902765766

方案3 给浏览器安装跨域插件,禁止浏览器报跨域

本插件并非万能,请仔细阅读与学习浏览器安全策略相关知识,不懂这些知识在评论里瞎喷的,官方不会回复。

当我们使用谷歌浏览器调试ajax请求的时候可能会遇到这两个问题:

  • 跨域资源共享 详见:CORS
  • 跨源读取阻塞 详见:CORB

最常见的就是关于跨域资源共享的问题,也就是我们通常说的跨域。当我们本地服务器预览页面,使用ajax访问远程服务器的内容时就会请求失败,比如:本地预览的地址是:http://localhost:8080/,访问的接口地址是http://dcloud.io/api。

如果仅仅是为了本地预览,可以使用Chrome浏览器插件来协助调试。
!!! 本插件只能解决简单请求的跨域调试(点击搜索什么是简单请求)。对于非简单请求的OPTION预检(点击搜索什么是预检请求)以及线上服务器也有跨域需求的用户,可以服务端配合解决

Chrome插件名称:Allow-Control-Allow-Origin: *

安装方式:

  1. 将下载的扩展插件拖入扩展管理页面

使用方式

  1. 打开待调试的页面
  2. 在扩展栏目找到安装的插件,点击打开插件配置
  3. 输入想要进行跨域调试的接口的地址,点击添加即可

注意事项

  • 此插件适合本地调试使用,线上部署如果和接口不同域还需要服务端配合。
  • 如果实际响应的内容与浏览器预期的内容有差异还可能被CORB策略所阻止。

firefox跨域插件

firefox跨域插件(注意firefox的css兼容问题)

其他历史问题

HBuilderX 2.3.0版在某些情况下会报跨域,请升级2.3.1+解决

收起阅读 »

开发uni-app遇到的问题(App方面)

uniapp

http://m3w.cn/wgsc 我们公司的App,做了一个多月,效果和问题你可以自己看。
uni-app确实让开发者拥有了编写小程序的开发体验来开发App,但是却把小程序里的很多问题也带到了App里,比如scrollview和下拉刷新的冲突,对下拉刷新功能的支持不完善。(还是要说一说uni的下拉刷新,在小程序里都能实现的下拉刷新样式更改,在App里反而阉割或不支持了)。我认为uni-app最终的效果应该远胜于mui(5+)开发的App,可是在实际开发中有的功能让我甚至想重回mui去写,很无语(比如uni的编译器,有的时候连编译器自己都报错....有的时候一个报错,重新编译立刻就没了,群里跟我说是编译器的缓存问题,我是不太了解uni的编译器,但是有的时候的报错上面显示的是编译到wxml文件时出错的,条件编译是很好,但是假如说我们这个项目使用uni只为了编译到App平台,那么我肯定不会在每个页面都加上一句##App-plus##这种东西吧?之前有几张uni编译器报错的截图,前两天被我误删了,这里的截图暂时没办法提供)。uni也有很多在小程序里支持很好的东西,但是在App里反而不好了,比如长列表渲染滚动,因为在小程序里视图层是单独占一个线程的,所以一样的效果和逻辑代码,我运行到App里卡到爆(骁龙821处理啊!)。
还有就是Vue,uni框架里的vue我不知道有没有改过,很多地方在vue里体验很好的东西,在uni里就无法实现或者很差,比如uni里的vue面对多层嵌套的组件,dom更新几乎不会响应,哪怕使用了$nextTick也没用(可以参考我们App的订单管理页面里每一个订单的按钮,我使用了定时器循环更新50次,间隔10ms方法),甚至在$nextTick里使用setTimeout也没用,还有就是组件的slot里不能获取到循环变量,。。。
说这个不是为了吐槽(理解为吐槽好像也不过分吧..),只是希望uni-app这个框架能够在小程序端比wepy更优秀,在App端比mui(5+)App更优秀,而不是如今这种只为了跨更多的平台,却忽略或者搁置很多已有的问题。

继续阅读 »

http://m3w.cn/wgsc 我们公司的App,做了一个多月,效果和问题你可以自己看。
uni-app确实让开发者拥有了编写小程序的开发体验来开发App,但是却把小程序里的很多问题也带到了App里,比如scrollview和下拉刷新的冲突,对下拉刷新功能的支持不完善。(还是要说一说uni的下拉刷新,在小程序里都能实现的下拉刷新样式更改,在App里反而阉割或不支持了)。我认为uni-app最终的效果应该远胜于mui(5+)开发的App,可是在实际开发中有的功能让我甚至想重回mui去写,很无语(比如uni的编译器,有的时候连编译器自己都报错....有的时候一个报错,重新编译立刻就没了,群里跟我说是编译器的缓存问题,我是不太了解uni的编译器,但是有的时候的报错上面显示的是编译到wxml文件时出错的,条件编译是很好,但是假如说我们这个项目使用uni只为了编译到App平台,那么我肯定不会在每个页面都加上一句##App-plus##这种东西吧?之前有几张uni编译器报错的截图,前两天被我误删了,这里的截图暂时没办法提供)。uni也有很多在小程序里支持很好的东西,但是在App里反而不好了,比如长列表渲染滚动,因为在小程序里视图层是单独占一个线程的,所以一样的效果和逻辑代码,我运行到App里卡到爆(骁龙821处理啊!)。
还有就是Vue,uni框架里的vue我不知道有没有改过,很多地方在vue里体验很好的东西,在uni里就无法实现或者很差,比如uni里的vue面对多层嵌套的组件,dom更新几乎不会响应,哪怕使用了$nextTick也没用(可以参考我们App的订单管理页面里每一个订单的按钮,我使用了定时器循环更新50次,间隔10ms方法),甚至在$nextTick里使用setTimeout也没用,还有就是组件的slot里不能获取到循环变量,。。。
说这个不是为了吐槽(理解为吐槽好像也不过分吧..),只是希望uni-app这个框架能够在小程序端比wepy更优秀,在App端比mui(5+)App更优秀,而不是如今这种只为了跨更多的平台,却忽略或者搁置很多已有的问题。

收起阅读 »

页面倒计时在跳转页面时不清除,再次打开页面重复渲染问题

倒计时

直接上解决方案:在监听页面卸载事件中清除定时器即可。

onUnload() {  
clearInterval(this.timer);  
}

直接上解决方案:在监听页面卸载事件中清除定时器即可。

onUnload() {  
clearInterval(this.timer);  
}

wap2app: vue2.0单页面h5站 改造APP

公司的移动端H5项目上线后,有新需求需要快速生成APP,于是开始准备使用wap2app封壳改造APP,现在基本功能已经完成。

准备写上一篇填坑的记录,和大家共同讨论,目前相关的资料特别少,所以把遇到的问题就列举出来。

本文不定期更新中。。

本人联系方式 qq:393268240

准备工作篇

H5网站配置:webpack自动化构建,vue2.0前端框架,flexble js适配方案

打包配置:HBuilderX新版,苹果证书,安卓证书。

项目构建

1新建wap2app项目

2选择默认模板

3开始配置manifest.json。
1)应用入口页面地址为:wap站首页url,注意一定要用https,如果使用http会被各种广告注入,包括什么联通,电信,还有一些乱七八糟的广告。

2)图标配置:每个分辨率都要准备png图片。

3)启动图配置:每个分辨率都上传,我只适配竖屏,横屏的图片就忽略了,注意图片压缩,不压缩会特别占空间。启动界面选项我配置的是延迟500毫秒自动关闭。tip:如果使用了自己的启动图记得不启用界面显示等待雪花,否则会显示0.3秒的Hbuild的LOGO再打开启动图,特别丑。

4)SDK配置:我只启用的支付部分,使用了支付宝支付。tip:此处的支付接口需要服务端生成订单信息orderstr用于入参,此处的服务端接口我们, 直接使用了支付宝小程序的接口,APP和小程序是通用的。

5)模块权限配置:我只启用了 支付,此处要和SDK同步启用模块

调试篇
1使用hbuild的运行功能进行真机调试

2连接真机到电脑,运行-运行到手机或模拟器-你的设备

3开始运行后,会在设备上安装一个hbuild的APP,通过这个APP打开项目可以在Hbuild控制台看到console.log信息。

4通过下列代码可以判断设备是否是APP环境

let userAgent = navigator.userAgent;
if (/Html5Plus/.test(userAgent)) { //APP客户端

}

改造篇
1分析需求:

列举从H5改造为APP需要调整的模块,我的APP主要改造部分为:头部导航栏,登录,支付,打开外链

1)登录模块:

原H5适用于,浏览器环境,微信公众号环境,所以使用了手机号验证码登录和微信授权登录。
APP登录方式,通过判断为APP环境后只显示手机号验证码登录

继续阅读 »

公司的移动端H5项目上线后,有新需求需要快速生成APP,于是开始准备使用wap2app封壳改造APP,现在基本功能已经完成。

准备写上一篇填坑的记录,和大家共同讨论,目前相关的资料特别少,所以把遇到的问题就列举出来。

本文不定期更新中。。

本人联系方式 qq:393268240

准备工作篇

H5网站配置:webpack自动化构建,vue2.0前端框架,flexble js适配方案

打包配置:HBuilderX新版,苹果证书,安卓证书。

项目构建

1新建wap2app项目

2选择默认模板

3开始配置manifest.json。
1)应用入口页面地址为:wap站首页url,注意一定要用https,如果使用http会被各种广告注入,包括什么联通,电信,还有一些乱七八糟的广告。

2)图标配置:每个分辨率都要准备png图片。

3)启动图配置:每个分辨率都上传,我只适配竖屏,横屏的图片就忽略了,注意图片压缩,不压缩会特别占空间。启动界面选项我配置的是延迟500毫秒自动关闭。tip:如果使用了自己的启动图记得不启用界面显示等待雪花,否则会显示0.3秒的Hbuild的LOGO再打开启动图,特别丑。

4)SDK配置:我只启用的支付部分,使用了支付宝支付。tip:此处的支付接口需要服务端生成订单信息orderstr用于入参,此处的服务端接口我们, 直接使用了支付宝小程序的接口,APP和小程序是通用的。

5)模块权限配置:我只启用了 支付,此处要和SDK同步启用模块

调试篇
1使用hbuild的运行功能进行真机调试

2连接真机到电脑,运行-运行到手机或模拟器-你的设备

3开始运行后,会在设备上安装一个hbuild的APP,通过这个APP打开项目可以在Hbuild控制台看到console.log信息。

4通过下列代码可以判断设备是否是APP环境

let userAgent = navigator.userAgent;
if (/Html5Plus/.test(userAgent)) { //APP客户端

}

改造篇
1分析需求:

列举从H5改造为APP需要调整的模块,我的APP主要改造部分为:头部导航栏,登录,支付,打开外链

1)登录模块:

原H5适用于,浏览器环境,微信公众号环境,所以使用了手机号验证码登录和微信授权登录。
APP登录方式,通过判断为APP环境后只显示手机号验证码登录

收起阅读 »

有关新手console.log语句最后是否有逗号的问题

     最近注意到一个小问题,就是在控制台跟着这个视频教程打,结果视频教程是一样的代码,还是出错找了半天。关于这个,语句结尾逗号  

是否要加,还是摸棱两可,加了HBuilderX报错可浏览器正常通过,不加就好,不知道这是不是一个小bug

     最近注意到一个小问题,就是在控制台跟着这个视频教程打,结果视频教程是一样的代码,还是出错找了半天。关于这个,语句结尾逗号  

是否要加,还是摸棱两可,加了HBuilderX报错可浏览器正常通过,不加就好,不知道这是不是一个小bug

Mac: HBuilderX svn使用教程

SVN Mac

1. 安装svn插件

点击菜单【工具】-->【插件安装】, 安装svn插件

2. Svn检出项目

方法1:

在项目管理器中,鼠标右键,点击导入,操作如下图:

备注:可能会出现项目类型无法识别的问题

  1. 如遇到无法连接到手机,请将项目移除,再拖进来。
  2. 或者选中项目,右键,点击:重新识别项目类型

方法2:

  1. 打开Mac终端
  2. 输入如下命令,然后将检出的项目直接拖到HBuilderX 项目管理器中
svn checkout url

3. Svn 提交更改

  1. 选中项目或选中要提交的代码
  2. 右键菜单,点击【SVN提交】
  3. 输入提交信息

4. Svn 更新

  1. 选中项目
  2. 右键菜单,点击【SVN更新】

5. 配置svn快捷键

  1. 点击菜单【工具】-->【自定义快捷键】
  2. 在文件底部可以找到如下配置
    //svn插件部分  
    //svn更新  
    //{"key":"","command":"ExternalCommand:SVN_UPDATE"},  
    //svn提交  
    //{"key":"","command":"ExternalCommand:SVN_COMMIT"},  
    //svn增加文件(单个文件)  
    //{"key":"","command":"ExternalCommand:SVN_ADD"},  
    //svn删除当前文件(单个文件)  
    //{"key":"","command":"ExternalCommand:SVN_REMOVE"},  
    //svn还原(revert)  
    //{"key":"","command":"ExternalCommand:SVN_REVERT"},
  3. 把你需要配的快捷键,复制到右侧,取消注释,在key里填入你的快捷键即可
    [  
    {"key":"command+alt+u","command":"ExternalCommand:SVN_UPDATE"},  
    {"key":"command+alt+i","command":"ExternalCommand:SVN_COMMIT"}  
    ]

6. 其它教程

3分钟学会SVN: https://segmentfault.com/a/1190000014245101

极客学院的SVN教程:http://wiki.jikexueyuan.com/project/svn/

win 版svn配置教程见:https://ask.dcloud.net.cn/article/35246

继续阅读 »

1. 安装svn插件

点击菜单【工具】-->【插件安装】, 安装svn插件

2. Svn检出项目

方法1:

在项目管理器中,鼠标右键,点击导入,操作如下图:

备注:可能会出现项目类型无法识别的问题

  1. 如遇到无法连接到手机,请将项目移除,再拖进来。
  2. 或者选中项目,右键,点击:重新识别项目类型

方法2:

  1. 打开Mac终端
  2. 输入如下命令,然后将检出的项目直接拖到HBuilderX 项目管理器中
svn checkout url

3. Svn 提交更改

  1. 选中项目或选中要提交的代码
  2. 右键菜单,点击【SVN提交】
  3. 输入提交信息

4. Svn 更新

  1. 选中项目
  2. 右键菜单,点击【SVN更新】

5. 配置svn快捷键

  1. 点击菜单【工具】-->【自定义快捷键】
  2. 在文件底部可以找到如下配置
    //svn插件部分  
    //svn更新  
    //{"key":"","command":"ExternalCommand:SVN_UPDATE"},  
    //svn提交  
    //{"key":"","command":"ExternalCommand:SVN_COMMIT"},  
    //svn增加文件(单个文件)  
    //{"key":"","command":"ExternalCommand:SVN_ADD"},  
    //svn删除当前文件(单个文件)  
    //{"key":"","command":"ExternalCommand:SVN_REMOVE"},  
    //svn还原(revert)  
    //{"key":"","command":"ExternalCommand:SVN_REVERT"},
  3. 把你需要配的快捷键,复制到右侧,取消注释,在key里填入你的快捷键即可
    [  
    {"key":"command+alt+u","command":"ExternalCommand:SVN_UPDATE"},  
    {"key":"command+alt+i","command":"ExternalCommand:SVN_COMMIT"}  
    ]

6. 其它教程

3分钟学会SVN: https://segmentfault.com/a/1190000014245101

极客学院的SVN教程:http://wiki.jikexueyuan.com/project/svn/

win 版svn配置教程见:https://ask.dcloud.net.cn/article/35246

收起阅读 »