HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

V3 部分样式 异常

v3

V3下

我主要发现了

  1. uni-icons 的图标为 undefined
  2. uni-icons被父元素的样式所影响

对于第一个问题;我没去深究原因;直接改用了 iconfont,便有图标了

对于第二个问题

这主要是我写的样式 采用 <text>标签赋值,或许这样权重太高,样式穿透了。我用 class 样式后,页面就正常了

原写法(该写法V3 下样式异常)

总结下 还是对语法要求 高了些

  • 我把应用的首页改为了Nvue 页面,好像在现在这个版本,fast 启动模式 有效了。

  • 在上个版本,andriod 下 还会有一个 taskcenter error

示例代码

继续阅读 »

V3下

我主要发现了

  1. uni-icons 的图标为 undefined
  2. uni-icons被父元素的样式所影响

对于第一个问题;我没去深究原因;直接改用了 iconfont,便有图标了

对于第二个问题

这主要是我写的样式 采用 <text>标签赋值,或许这样权重太高,样式穿透了。我用 class 样式后,页面就正常了

原写法(该写法V3 下样式异常)

总结下 还是对语法要求 高了些

  • 我把应用的首页改为了Nvue 页面,好像在现在这个版本,fast 启动模式 有效了。

  • 在上个版本,andriod 下 还会有一个 taskcenter error

示例代码

收起阅读 »

个人接单插件开发(只接原生插件)。

插件开发

个人接单插件开发(只接原生插件,iOS、Android 双端)。如有需要的可以联系 QQ。176142998

个人接单插件开发(只接原生插件,iOS、Android 双端)。如有需要的可以联系 QQ。176142998

扬州招聘前端uni-app工程师

招聘

职位要求:
1.大学本科(全日制)及以上学历,软件技术、计算机科学与技术、电子工程等相关专业;
2.1-3年以上Web前端工作经验、对小程序前端开发有经验;
3.熟练使用JavaScript、CSS/CSS3.HTML4/HTML5编程开发,熟悉其标准规范及各浏览器差异性;
4.熟练掌握AjaxHTTP等基础知识了解跨域机制;
5.熟练前端模块化开发,面向对象编程开发;
6.熟练使用jQuery、Vue、uni-app、Ember等框架对前端组件化有一定的理解;
7.熟练使用前端代码管理及打包工具。

工作地点:扬州设计瑰谷
投递邮箱:huashi3483@qq.com

继续阅读 »

职位要求:
1.大学本科(全日制)及以上学历,软件技术、计算机科学与技术、电子工程等相关专业;
2.1-3年以上Web前端工作经验、对小程序前端开发有经验;
3.熟练使用JavaScript、CSS/CSS3.HTML4/HTML5编程开发,熟悉其标准规范及各浏览器差异性;
4.熟练掌握AjaxHTTP等基础知识了解跨域机制;
5.熟练前端模块化开发,面向对象编程开发;
6.熟练使用jQuery、Vue、uni-app、Ember等框架对前端组件化有一定的理解;
7.熟练使用前端代码管理及打包工具。

工作地点:扬州设计瑰谷
投递邮箱:huashi3483@qq.com

收起阅读 »

uni-app阻止事件向父级冒泡

在官网找到的就只有这个方法,但是我放在app项目里并不支持,所以就想到vue的阻止事件冒泡的方法,现在分享,免得大家踩坑
@click.stop.prevent="onClick" 事件名仅为示范

在官网找到的就只有这个方法,但是我放在app项目里并不支持,所以就想到vue的阻止事件冒泡的方法,现在分享,免得大家踩坑
@click.stop.prevent="onClick" 事件名仅为示范

chrome拓展(收藏uniapp-插件市场插件)

效果图:

使用方法:

1.打开Chrome浏览器,然后可以看到右上角有个三个点组成的图标

2.更多工具=>拓展程序=>打开开发者模式=>加载已解压的扩展程序=>选择该项目文件

3.刷新插件市场页面

github

继续阅读 »

效果图:

使用方法:

1.打开Chrome浏览器,然后可以看到右上角有个三个点组成的图标

2.更多工具=>拓展程序=>打开开发者模式=>加载已解压的扩展程序=>选择该项目文件

3.刷新插件市场页面

github

收起阅读 »

贡献native.js(NJS)一些代码,将持续更新

Native.JS NJS

===为了书写方便,同时为了性能,频繁使用importClass()导入类会损失更多性能,所以封装了导入类=====================
使用方法:
iosImport('Hello'); //默认导入windows全局变量
var hello = new Hello();
hello.say();

如果不想导入windows全局变量,则可以这样:
var Hello = iosImport('Hello', false); //多传入一个参数false
var hello = new Hello();
hello.say();

    var androidImported = {};  
    var iosImported = {};  

    window.androidImport = function(classname, global) {  
        if (false !== global) {  
            global = true;  
        }  

        if (!window.plus) {  
            return null;  
        }  

        if (!androidImported[classname]) {  
            androidImported[classname] = plus.android.importClass(classname);  
        }  

        if (global) {  
            var myClass = classname.split('.').pop();  
            if (!window[myClass]) {  
                window[myClass] = androidImported[classname];  
            }  
        }  

        return androidImported[classname];  
    }  

    window.iosImport = function(classname, global) {  
        if (false !== global) {  
            global = true;  
        }  

        if (!window.plus) {  
            return null;  
        }  

        if (!iosImported[classname]) {  
            iosImported[classname] = plus.ios.importClass(classname);  
        }  

        if (global) {  
            var myClass = classname.split('.').pop();  
            if (!window[myClass]) {  
                window[myClass] = iosImported[classname];  
            }  
        }  

        return iosImported[classname];  
    }

===播放自定义提示音(需离线打包,添加自己的声音资源)================================
搞这个是因为官方没提供播放系统声音的方法,而使用plus.ios.invoke又没效果,比如plus.ios.invoke(null, 'AudioServicesPlaySystemSound', 1103);压根不起作用,官方的plus.audio.createPlayer感觉又有点麻烦,也不知道能否播放自己添加的声音资源,还需要添加liblibMedia.a,libopencore-amrnb.a,libmp3lame.a这几个库文件,增加包尺寸。

使用方法:
iosPlaySystemSound('my.wav');

window.iosPlaySystemSound = function(filename) {  
        if (!window.plus) {  
            return false;  
        }  

        iosImport('NSBundle');  
        iosImport('AVAudioPlayer');  

        var bundle = NSBundle.mainBundle();  
        var soundUrl = bundle.URLForResourcewithExtension(filename, null);  

        var player = new AVAudioPlayer();  
        player.initWithContentsOfURLerror(soundUrl, null);  
        if (!player) {  
            console.log('failed to play: ' + filename);  
            return false;  
        }  
        player.setNumberOfLoops(0); //-1:无限循环  
        player.setVolume(1);  
        player.prepareToPlay();  
        player.play();  
    }

===短震,震动反馈==============================================

window.shortVibrate = function() {  
        if (!window.plus) {  
                return false;  
        }  

        if (plus.os.name == 'iOS') {  
            iosImport('UIImpactFeedbackGenerator');  
            var impact = new UIImpactFeedbackGenerator();  
            impact.prepare();  
            impact.init(1);  
            impact.impactOccurred();  
        } else {  
            window.plus.device.vibrate(10);  
        }  
    }
继续阅读 »

===为了书写方便,同时为了性能,频繁使用importClass()导入类会损失更多性能,所以封装了导入类=====================
使用方法:
iosImport('Hello'); //默认导入windows全局变量
var hello = new Hello();
hello.say();

如果不想导入windows全局变量,则可以这样:
var Hello = iosImport('Hello', false); //多传入一个参数false
var hello = new Hello();
hello.say();

    var androidImported = {};  
    var iosImported = {};  

    window.androidImport = function(classname, global) {  
        if (false !== global) {  
            global = true;  
        }  

        if (!window.plus) {  
            return null;  
        }  

        if (!androidImported[classname]) {  
            androidImported[classname] = plus.android.importClass(classname);  
        }  

        if (global) {  
            var myClass = classname.split('.').pop();  
            if (!window[myClass]) {  
                window[myClass] = androidImported[classname];  
            }  
        }  

        return androidImported[classname];  
    }  

    window.iosImport = function(classname, global) {  
        if (false !== global) {  
            global = true;  
        }  

        if (!window.plus) {  
            return null;  
        }  

        if (!iosImported[classname]) {  
            iosImported[classname] = plus.ios.importClass(classname);  
        }  

        if (global) {  
            var myClass = classname.split('.').pop();  
            if (!window[myClass]) {  
                window[myClass] = iosImported[classname];  
            }  
        }  

        return iosImported[classname];  
    }

===播放自定义提示音(需离线打包,添加自己的声音资源)================================
搞这个是因为官方没提供播放系统声音的方法,而使用plus.ios.invoke又没效果,比如plus.ios.invoke(null, 'AudioServicesPlaySystemSound', 1103);压根不起作用,官方的plus.audio.createPlayer感觉又有点麻烦,也不知道能否播放自己添加的声音资源,还需要添加liblibMedia.a,libopencore-amrnb.a,libmp3lame.a这几个库文件,增加包尺寸。

使用方法:
iosPlaySystemSound('my.wav');

window.iosPlaySystemSound = function(filename) {  
        if (!window.plus) {  
            return false;  
        }  

        iosImport('NSBundle');  
        iosImport('AVAudioPlayer');  

        var bundle = NSBundle.mainBundle();  
        var soundUrl = bundle.URLForResourcewithExtension(filename, null);  

        var player = new AVAudioPlayer();  
        player.initWithContentsOfURLerror(soundUrl, null);  
        if (!player) {  
            console.log('failed to play: ' + filename);  
            return false;  
        }  
        player.setNumberOfLoops(0); //-1:无限循环  
        player.setVolume(1);  
        player.prepareToPlay();  
        player.play();  
    }

===短震,震动反馈==============================================

window.shortVibrate = function() {  
        if (!window.plus) {  
                return false;  
        }  

        if (plus.os.name == 'iOS') {  
            iosImport('UIImpactFeedbackGenerator');  
            var impact = new UIImpactFeedbackGenerator();  
            impact.prepare();  
            impact.init(1);  
            impact.impactOccurred();  
        } else {  
            window.plus.device.vibrate(10);  
        }  
    }
收起阅读 »

团队全职长期接APP,中后台开发

外包

开发经验:5年。
UNI经验:从UNI发布至今一直使用,前以及开发了10多个UNIAPP项目
UNI项目其中包含:淘宝客项目、教育类项目、区块链项目、商城项目等其他小中大型APP

说明:团队承接,长期接外包,公司个人均可
技术方向:uniappvuepythonphpflutternodejs

联系方式q:1910563900
微信:BGF-FF

继续阅读 »

开发经验:5年。
UNI经验:从UNI发布至今一直使用,前以及开发了10多个UNIAPP项目
UNI项目其中包含:淘宝客项目、教育类项目、区块链项目、商城项目等其他小中大型APP

说明:团队承接,长期接外包,公司个人均可
技术方向:uniappvuepythonphpflutternodejs

联系方式q:1910563900
微信:BGF-FF

收起阅读 »

创造力是让人去“

作为决定创造范围的想像

作为决定创造范围的想像

HBuilderX 2.7.5+版本,支持注释模板同步时间

代码块

HBuilderX 2.7.5+版本起,支持主持注释模板同步时间

如下动画所示:

说明

点击菜单【工具】【代码块设置】【javascript代码块】,输入如下内容:

{  
    "method-annotation": {  
        "prefix": "anno",  
        "body": [  
            "/**",  
            " * 方法说明",  
            " * author: 佚名",  
            " * description: ",  
            " * @param $1",  
            " * @return $2",  
            " * @createTime: $DATE_TIME",  
            " */"  
        ],  
        "triggerAssist": false,  
        "description": "method annotation"  
    }  
}  
继续阅读 »

HBuilderX 2.7.5+版本起,支持主持注释模板同步时间

如下动画所示:

说明

点击菜单【工具】【代码块设置】【javascript代码块】,输入如下内容:

{  
    "method-annotation": {  
        "prefix": "anno",  
        "body": [  
            "/**",  
            " * 方法说明",  
            " * author: 佚名",  
            " * description: ",  
            " * @param $1",  
            " * @return $2",  
            " * @createTime: $DATE_TIME",  
            " */"  
        ],  
        "triggerAssist": false,  
        "description": "method annotation"  
    }  
}  
收起阅读 »

uni-app高分开源电影项目源码案例分析

源码分享 uni_app项目 uniapp

项目地址

项目特点

  • 代码编写简洁,注释清晰,快速入门必备;
  • 支持在线模糊搜索;
  • 程序类目懒加载,支持在线播放预告片;
  • 更好的App跨平台框架、更方便的H5开发框架,加载新页面速度更快;
  • 一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

扫码预览

预览

启动准备

​ 小程序账号及微信开发者工具: https://mp.weixin.qq.com

​ 建议编辑器:HBuilderX

小程序启动可能会遇到问题:

  • HBuilderX报错:微信开发者工具拒绝HBuilderX访问端口

    答:微信开发者工具 -- 设置 -- 安全设置,点击开启服务端口即可解决。

  • 小程序报错:不在以下 request 合法域名列表中

    答:这是因为在小程序中发起了wx.request请求,但是请求的域名没有在微信公众平台后台设置,管理员将需要使用的域名添加到小程序后台,(调试时可以点击微信开发者工具右上角 详情 -- 本地设置 -- 勾选不校验合法域名 ,可暂时取消报错)。

  • 小程序报错:Failed to load media http://xxx.xx server responded with a status of 403

    答:这是小程序电影详情页面的预告片视频报错(不影响可忽略此错误),并不是加载视频错误,而是微信开发者工具中加载视频会提示这个错误,所以在调试带有视频的控件时,可以点击真机预览小程序。

部分源码示例

<template>
<view class="container">
<!-- loading动画 -->
<mi-loading ref="loading" title="加载中" :hasMask="true"></mi-loading>
<view style="background-color: #CAF2F2">
<cu-custom :isBack="true">
<block slot="backText"> </block>
<block slot="content" class="tarbar">搜索</block>
</cu-custom>
</view>
<scroll-view>
<view class="topBar">
<image src="~@/static/img/search.jpeg" mode="widthFix" class="response"></image>
<view class="searchBox">
<input class="search-t" placeholder="请输入关键字搜索" @input="messagesearch"></input>
<view class="button" @click="getInfo">Go
<view class="t"></view>
</view>
</view>
</view>
<!-- 电影列表 -->
<view class="movieH">搜索结果</view>
<view class="movieBox">
<view v-for="(item, index) in movieInfo" :key="index" class="movieList" @click="getDate(item)">
<image :src="item.img" class="movieImg"></image>
<view>
{{ item.title | ellipsis }}
<view class="moiveRate">
<!-- <uni-rate disabled="true" :value="item.rating.average/2" size=14 active-color="#D81E06" color="#DADADA">
</uni-rate> -->
<text class="moiveRateT"></text>
</view>
</view>
</view>
</view>
<uni-load-more :status="listStatus" :contentText="contentText" v-if="loadStatu"></uni-load-more>
</scroll-view>
</view>
</template>

继续阅读 »

项目地址

项目特点

  • 代码编写简洁,注释清晰,快速入门必备;
  • 支持在线模糊搜索;
  • 程序类目懒加载,支持在线播放预告片;
  • 更好的App跨平台框架、更方便的H5开发框架,加载新页面速度更快;
  • 一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

扫码预览

预览

启动准备

​ 小程序账号及微信开发者工具: https://mp.weixin.qq.com

​ 建议编辑器:HBuilderX

小程序启动可能会遇到问题:

  • HBuilderX报错:微信开发者工具拒绝HBuilderX访问端口

    答:微信开发者工具 -- 设置 -- 安全设置,点击开启服务端口即可解决。

  • 小程序报错:不在以下 request 合法域名列表中

    答:这是因为在小程序中发起了wx.request请求,但是请求的域名没有在微信公众平台后台设置,管理员将需要使用的域名添加到小程序后台,(调试时可以点击微信开发者工具右上角 详情 -- 本地设置 -- 勾选不校验合法域名 ,可暂时取消报错)。

  • 小程序报错:Failed to load media http://xxx.xx server responded with a status of 403

    答:这是小程序电影详情页面的预告片视频报错(不影响可忽略此错误),并不是加载视频错误,而是微信开发者工具中加载视频会提示这个错误,所以在调试带有视频的控件时,可以点击真机预览小程序。

部分源码示例

<template>
<view class="container">
<!-- loading动画 -->
<mi-loading ref="loading" title="加载中" :hasMask="true"></mi-loading>
<view style="background-color: #CAF2F2">
<cu-custom :isBack="true">
<block slot="backText"> </block>
<block slot="content" class="tarbar">搜索</block>
</cu-custom>
</view>
<scroll-view>
<view class="topBar">
<image src="~@/static/img/search.jpeg" mode="widthFix" class="response"></image>
<view class="searchBox">
<input class="search-t" placeholder="请输入关键字搜索" @input="messagesearch"></input>
<view class="button" @click="getInfo">Go
<view class="t"></view>
</view>
</view>
</view>
<!-- 电影列表 -->
<view class="movieH">搜索结果</view>
<view class="movieBox">
<view v-for="(item, index) in movieInfo" :key="index" class="movieList" @click="getDate(item)">
<image :src="item.img" class="movieImg"></image>
<view>
{{ item.title | ellipsis }}
<view class="moiveRate">
<!-- <uni-rate disabled="true" :value="item.rating.average/2" size=14 active-color="#D81E06" color="#DADADA">
</uni-rate> -->
<text class="moiveRateT"></text>
</view>
</view>
</view>
</view>
<uni-load-more :status="listStatus" :contentText="contentText" v-if="loadStatu"></uni-load-more>
</scroll-view>
</view>
</template>

收起阅读 »

uni-app高分开源电影项目源码案例分析

uni_app项目 源码分享

项目地址

项目特点

  • 代码编写简洁,注释清晰,快速入门必备;
  • 支持在线模糊搜索;
  • 程序类目懒加载,支持在线播放预告片;
  • 更好的App跨平台框架、更方便的H5开发框架,加载新页面速度更快;
  • 一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

扫码预览

预览

启动准备

​ 小程序账号及微信开发者工具: https://mp.weixin.qq.com

​ 建议编辑器:HBuilderX

小程序启动可能会遇到问题:

  • HBuilderX报错:微信开发者工具拒绝HBuilderX访问端口

    答:微信开发者工具 -- 设置 -- 安全设置,点击开启服务端口即可解决。

  • 小程序报错:不在以下 request 合法域名列表中

    答:这是因为在小程序中发起了wx.request请求,但是请求的域名没有在微信公众平台后台设置,管理员将需要使用的域名添加到小程序后台,(调试时可以点击微信开发者工具右上角 详情 -- 本地设置 -- 勾选不校验合法域名 ,可暂时取消报错)。

  • 小程序报错:Failed to load media http://xxx.xx server responded with a status of 403

    答:这是小程序电影详情页面的预告片视频报错(不影响可忽略此错误),并不是加载视频错误,而是微信开发者工具中加载视频会提示这个错误,所以在调试带有视频的控件时,可以点击真机预览小程序。

部分源码示例

<template>
<view class="container">
<!-- loading动画 -->
<mi-loading ref="loading" title="加载中" :hasMask="true"></mi-loading>
<view style="background-color: #CAF2F2">
<cu-custom :isBack="true">
<block slot="backText"> </block>
<block slot="content" class="tarbar">搜索</block>
</cu-custom>
</view>
<scroll-view>
<view class="topBar">
<image src="~@/static/img/search.jpeg" mode="widthFix" class="response"></image>
<view class="searchBox">
<input class="search-t" placeholder="请输入关键字搜索" @input="messagesearch"></input>
<view class="button" @click="getInfo">Go
<view class="t"></view>
</view>
</view>
</view>
<!-- 电影列表 -->
<view class="movieH">搜索结果</view>
<view class="movieBox">
<view v-for="(item, index) in movieInfo" :key="index" class="movieList" @click="getDate(item)">
<image :src="item.img" class="movieImg"></image>
<view>
{{ item.title | ellipsis }}
<view class="moiveRate">
<!-- <uni-rate disabled="true" :value="item.rating.average/2" size=14 active-color="#D81E06" color="#DADADA">
</uni-rate> -->
<text class="moiveRateT"></text>
</view>
</view>
</view>
</view>
<uni-load-more :status="listStatus" :contentText="contentText" v-if="loadStatu"></uni-load-more>
</scroll-view>
</view>
</template>

继续阅读 »

项目地址

项目特点

  • 代码编写简洁,注释清晰,快速入门必备;
  • 支持在线模糊搜索;
  • 程序类目懒加载,支持在线播放预告片;
  • 更好的App跨平台框架、更方便的H5开发框架,加载新页面速度更快;
  • 一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

扫码预览

预览

启动准备

​ 小程序账号及微信开发者工具: https://mp.weixin.qq.com

​ 建议编辑器:HBuilderX

小程序启动可能会遇到问题:

  • HBuilderX报错:微信开发者工具拒绝HBuilderX访问端口

    答:微信开发者工具 -- 设置 -- 安全设置,点击开启服务端口即可解决。

  • 小程序报错:不在以下 request 合法域名列表中

    答:这是因为在小程序中发起了wx.request请求,但是请求的域名没有在微信公众平台后台设置,管理员将需要使用的域名添加到小程序后台,(调试时可以点击微信开发者工具右上角 详情 -- 本地设置 -- 勾选不校验合法域名 ,可暂时取消报错)。

  • 小程序报错:Failed to load media http://xxx.xx server responded with a status of 403

    答:这是小程序电影详情页面的预告片视频报错(不影响可忽略此错误),并不是加载视频错误,而是微信开发者工具中加载视频会提示这个错误,所以在调试带有视频的控件时,可以点击真机预览小程序。

部分源码示例

<template>
<view class="container">
<!-- loading动画 -->
<mi-loading ref="loading" title="加载中" :hasMask="true"></mi-loading>
<view style="background-color: #CAF2F2">
<cu-custom :isBack="true">
<block slot="backText"> </block>
<block slot="content" class="tarbar">搜索</block>
</cu-custom>
</view>
<scroll-view>
<view class="topBar">
<image src="~@/static/img/search.jpeg" mode="widthFix" class="response"></image>
<view class="searchBox">
<input class="search-t" placeholder="请输入关键字搜索" @input="messagesearch"></input>
<view class="button" @click="getInfo">Go
<view class="t"></view>
</view>
</view>
</view>
<!-- 电影列表 -->
<view class="movieH">搜索结果</view>
<view class="movieBox">
<view v-for="(item, index) in movieInfo" :key="index" class="movieList" @click="getDate(item)">
<image :src="item.img" class="movieImg"></image>
<view>
{{ item.title | ellipsis }}
<view class="moiveRate">
<!-- <uni-rate disabled="true" :value="item.rating.average/2" size=14 active-color="#D81E06" color="#DADADA">
</uni-rate> -->
<text class="moiveRateT"></text>
</view>
</view>
</view>
</view>
<uni-load-more :status="listStatus" :contentText="contentText" v-if="loadStatu"></uni-load-more>
</scroll-view>
</view>
</template>

收起阅读 »