HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-app之推送

推送

写这个之前被推送给弄蒙了,因为之前没接触过。。。。下面说一下我摸索来的大致过程:
我用的是个推
1:首先需要去个推官网申请账号;
2:然后点击manifest在AppSDK配置去填写在个推平台创建的应用的appid、appkey、appsecret属性;
3:在App模块权限配置中勾选push
4:如果ios也需要加推送的话需要用个推官网的那个透传的模板
在app.vue中的代码为(第一次写,不太会用)
//监听click事件,用户从消息中心点击触发的
plus.push.addEventListener("click", function (msg) {
//根据payload传递过来的数据,打开一个详情
var payload = msg.payload;
if (payload) {
// payload 按照规范是 Object,但实际推送过来有可能是 String,需要多一步处理;
if (typeof payload === 'string') {
payload = JSON.parse(payload);
}
if (typeof payload === 'object') {
if(payload.url){
setTimeout(function(res){
uni.navigateTo({
url:payload.url
})
},1000)
}
}
}
}, false);

            //监听receive事件  
            plus.push.addEventListener("receive", function (msg) {  
                if (plus.os.name != 'iOS') {  
                    plus.push.createMessage(msg.title,msg.payload);  
                }  
                //根据payload传递过来的数据,打开一个详情  
                var payload;  
                if (msg.payload) {  
                    //如透传消息不符合格式,则“payload”属性为string类型  
                    //这里的示例以json字符串去解析,实际上也可以做字符串匹配  
                    if (typeof (msg.payload) == "string") {  
                        try {  
                            payload = JSON.parse(msg.payload);  
                        } catch (error) {  
                            console.log(error);  
                        }  
                    } else if (typeof (msg.payload) == "object") {  
                        //iOS应用正处于前台运行时收到推送,也触发receive事件,此时payload为json对象  
                        plus.push.createMessage(msg.title,msg.content);  
                    }  
                }  

            }, false);
继续阅读 »

写这个之前被推送给弄蒙了,因为之前没接触过。。。。下面说一下我摸索来的大致过程:
我用的是个推
1:首先需要去个推官网申请账号;
2:然后点击manifest在AppSDK配置去填写在个推平台创建的应用的appid、appkey、appsecret属性;
3:在App模块权限配置中勾选push
4:如果ios也需要加推送的话需要用个推官网的那个透传的模板
在app.vue中的代码为(第一次写,不太会用)
//监听click事件,用户从消息中心点击触发的
plus.push.addEventListener("click", function (msg) {
//根据payload传递过来的数据,打开一个详情
var payload = msg.payload;
if (payload) {
// payload 按照规范是 Object,但实际推送过来有可能是 String,需要多一步处理;
if (typeof payload === 'string') {
payload = JSON.parse(payload);
}
if (typeof payload === 'object') {
if(payload.url){
setTimeout(function(res){
uni.navigateTo({
url:payload.url
})
},1000)
}
}
}
}, false);

            //监听receive事件  
            plus.push.addEventListener("receive", function (msg) {  
                if (plus.os.name != 'iOS') {  
                    plus.push.createMessage(msg.title,msg.payload);  
                }  
                //根据payload传递过来的数据,打开一个详情  
                var payload;  
                if (msg.payload) {  
                    //如透传消息不符合格式,则“payload”属性为string类型  
                    //这里的示例以json字符串去解析,实际上也可以做字符串匹配  
                    if (typeof (msg.payload) == "string") {  
                        try {  
                            payload = JSON.parse(msg.payload);  
                        } catch (error) {  
                            console.log(error);  
                        }  
                    } else if (typeof (msg.payload) == "object") {  
                        //iOS应用正处于前台运行时收到推送,也触发receive事件,此时payload为json对象  
                        plus.push.createMessage(msg.title,msg.content);  
                    }  
                }  

            }, false);
收起阅读 »

uni-app实战教程 - 《悦读》项目实战 已经发布,前后端全栈教程

uniapp 教程


uni-app实战教程 - 《悦读》项目实战以uniapp为基础后端使用php+mysql,详细讲解了跨平台应用开发的方方面面!包含接口安全、接口交互、多图上传、服务器部署、uni-app开发常用知识点讲解!是一套非常全面的uniapp实战教程!

课程购买前必看(关于项目效果请观看第一节免费介绍)
1、这是一套有 难度的且 很全面的课程!!需要有一定的编程基础或者您具备耐心才能学懂!
所以购买之前请确定您有耐心和战胜困难的勇气!课程讲解了前后端,代码量极大!
2、您购买的是课程您的目的是学习,不是拿源码直接运行。
项目需要自己搭建后端环境(php+mysql),课程内源代码提供的接口只用于演示不能直接使用 !
3、您的耐心会使您快速成长,因为本套课程是极其接近实战的课程、涉及到的内容比较饱满。
4、 课程包含一次1对1的辅助问答(时间 30分钟内),因学员比较多,您可能需要预定此项服务,技术支持客服 QQ 1265928288。
一次免费的问答结束后其他的问答需要收费,希望理解 (:
5、做课程本身不容易,请用包容的心态去学习!课程内所有环节都能够百分百实现,遇到问题请仔细检查您的代码,不要因为一点点困难放弃!
课程准备时间3周,录制过程我们付出了很多努力的汗水,希望大家公正评价,感谢!

课程大纲

  1. 创建项目、后端环境介绍
  2. 封装全局登录检查函数并部署
  3. uniapp app 端微信登录原理、条件编译
  4. 部署 php 环境(局域网内环境部署)
  5. 创建用户数据表,完成app端用户登录功能
  6. 完成微信小程序端登录
  7. 多应用、多平台统一登录关系
  8. api接口安全策略 - 签名策略(前后端签名算法)
  9. 完成写作页面布局
  10. 在登录环节使用签名验证策略
  11. 完成图片批量上传工作
  12. 完成文章提交功能
  13. 我的界面布局、用户发布文章获取
  14. 删除文章功能实现
  15. 完成文章编辑功能
  16. 首页文章列表布局、下拉刷新、上拉加载、分类切换
  17. 详情页面布局、骨架屏数据加载
  18. 完成文章详情页面的图片预览功能
  19. 公网环境部署(从空间购买到完整部署)
  20. 注销功能开发

课程地址 :
https://ke.qq.com/course/364262?tuin=4f8da6

继续阅读 »


uni-app实战教程 - 《悦读》项目实战以uniapp为基础后端使用php+mysql,详细讲解了跨平台应用开发的方方面面!包含接口安全、接口交互、多图上传、服务器部署、uni-app开发常用知识点讲解!是一套非常全面的uniapp实战教程!

课程购买前必看(关于项目效果请观看第一节免费介绍)
1、这是一套有 难度的且 很全面的课程!!需要有一定的编程基础或者您具备耐心才能学懂!
所以购买之前请确定您有耐心和战胜困难的勇气!课程讲解了前后端,代码量极大!
2、您购买的是课程您的目的是学习,不是拿源码直接运行。
项目需要自己搭建后端环境(php+mysql),课程内源代码提供的接口只用于演示不能直接使用 !
3、您的耐心会使您快速成长,因为本套课程是极其接近实战的课程、涉及到的内容比较饱满。
4、 课程包含一次1对1的辅助问答(时间 30分钟内),因学员比较多,您可能需要预定此项服务,技术支持客服 QQ 1265928288。
一次免费的问答结束后其他的问答需要收费,希望理解 (:
5、做课程本身不容易,请用包容的心态去学习!课程内所有环节都能够百分百实现,遇到问题请仔细检查您的代码,不要因为一点点困难放弃!
课程准备时间3周,录制过程我们付出了很多努力的汗水,希望大家公正评价,感谢!

课程大纲

  1. 创建项目、后端环境介绍
  2. 封装全局登录检查函数并部署
  3. uniapp app 端微信登录原理、条件编译
  4. 部署 php 环境(局域网内环境部署)
  5. 创建用户数据表,完成app端用户登录功能
  6. 完成微信小程序端登录
  7. 多应用、多平台统一登录关系
  8. api接口安全策略 - 签名策略(前后端签名算法)
  9. 完成写作页面布局
  10. 在登录环节使用签名验证策略
  11. 完成图片批量上传工作
  12. 完成文章提交功能
  13. 我的界面布局、用户发布文章获取
  14. 删除文章功能实现
  15. 完成文章编辑功能
  16. 首页文章列表布局、下拉刷新、上拉加载、分类切换
  17. 详情页面布局、骨架屏数据加载
  18. 完成文章详情页面的图片预览功能
  19. 公网环境部署(从空间购买到完整部署)
  20. 注销功能开发

课程地址 :
https://ke.qq.com/course/364262?tuin=4f8da6

收起阅读 »

苹果手机不支持获取焦点事件

因为app需要改版登录页获取验证码,所以需要修改,就用了6个input标签来写入验证码。
利用jquery循环来监听输入数字是否输入宽里面。根据需求已经满足安卓了。但是,因为ios不支持,所以今天的努力白瞎了;所以需要重写。
代码张贴如下

因为app需要改版登录页获取验证码,所以需要修改,就用了6个input标签来写入验证码。
利用jquery循环来监听输入数字是否输入宽里面。根据需求已经满足安卓了。但是,因为ios不支持,所以今天的努力白瞎了;所以需要重写。
代码张贴如下

uni-app 区间选择滑块

uniapp

在做应用时,需要用到区间选择滑动,然而官方默认是无此组件的。
好在做小程序的人才很多,有网友分享了区间选择滑块:https://github.com/Money888/wechat-rangeslider

经过一番修改,感觉uni与小程序差别还是挺大的,最终效果如下图,使用文档可以参考上个组件。

感谢原作者!

附上我修改后的组件地址:
https://github.com/zhangdaren/uni-app-range-slider

继续阅读 »

在做应用时,需要用到区间选择滑动,然而官方默认是无此组件的。
好在做小程序的人才很多,有网友分享了区间选择滑块:https://github.com/Money888/wechat-rangeslider

经过一番修改,感觉uni与小程序差别还是挺大的,最终效果如下图,使用文档可以参考上个组件。

感谢原作者!

附上我修改后的组件地址:
https://github.com/zhangdaren/uni-app-range-slider

收起阅读 »

用uni-app开发的一个购物app,微信小程序demo。源码分享给大家

uni_app


git仓库地址;欢迎大家加入,以前来开发一个购物demo
https://gitee.com/wokaixin/uni-app


git仓库地址;欢迎大家加入,以前来开发一个购物demo
https://gitee.com/wokaixin/uni-app

Android原生集成 H5+或UniApp 最基本配置

1.建立Android基础工程,不使用任何插件,只需导入:

lib.5plus.base-release.aar

2.HBuiderX 里创建工程, 生成本地资源:

如:xxx/UNI342FBEF/www 文件夹
PS:切记一定要把之前的资源xxx/UNI342FBEF/www 删除,再生成。否则不会生成最新的,改动的内容没有打包进去。【浪费了好多好多时间】

3.将2中生成的本地资源,拷贝到 Android项目中的 /assets/apps/ 下。

PS:切记不要修改文件夹的名称 UNI342FBEF/www 【不要修改 不要修改 不要修改】

4. /assets/data/文件夹下 三个文件

1)dcloud_control.xml     
       **本文件中的  appid  是 3 中的 __UNI__342FBEF。必须保持一致**  
2)dcloud_error.html   
3)dcloud_properties.xml   
      本文件中 添加插件  

5. 有两种方式使用 HBuilderX生成的本地资源

1)WebAPP方式

     a) 直接拷贝下载的 SDK包里的  HBuilder-Integrate-AS 工程中的  SDK_WebApp.java文件到自己的项目中。  
     b)SDK_WebApp.java文件中修改如下:   
     public void onCoreInitEnd(ICore coreHandler) {  

    // 表示Webapp的路径在 file:///android_asset/apps/HelloH5  
    String appBasePath = "/apps/__UNI__342FBEF";  
    }  

      c) 修改 AndroidManifest.xml文件:  
          1)必须添加权限:  
             <uses-permission android:name="android.permission.INTERNET" />  
           2)<application 是否修改 无所谓,如果修改如下:  
                    ```javascript  
                    <application  
                      tools:replace="android:name"  
                      android:name="com.fandy.plugins.PluginsApp" //自己的Application  
                         ...  
            3)注册activity  
                    <activity  
                      android:name=".SDK_WebApp"  
                           ...  

2)WebView方式

     a) 直接拷贝下载的 SDK包里的  HBuilder-Integrate-AS 工程中的  SDK_WebView.java文件到自己的项目中。  
     b)SDK_WebView.java文件中修改如下:   
            @Override  
public void onCoreInitEnd(ICore coreHandler) {  
    // 设置单页面集成的appid  
    String appid = "__UNI__342FBEF";  
    // 单页面集成时要加载页面的路径,可以是本地文件路径也可以是网络路径  
    String url = "file:///android_asset/apps/__UNI__342FBEF/www/__uniappservice.html";  
       **PS: url路径中的__uniappservice.html 是从 /assets/apps/__UNI__342FBEF/www 文件夹下 manifest.json文件中的 "launch_path" 值得到。**  

6 Android app build.gradle 文件修改:

    android {  
            ...  
        defaultConfig {  

            multiDexEnabled true  
            ndk {  
                abiFilters 'x86','armeabi'  //使用uniapp时必须同时选择二者或选其一  
            }  

        }  
               ...  

        //使用uniapp时,需复制下面代码  
        /*代码开始*/  
        aaptOptions {  
            additionalParameters '--auto-add-overlay'  
            //noCompress 'foo', 'bar'  
            ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"  
        }  
        /*代码结束*/  
    }  

    repositories {  
        flatDir {  
            dirs 'libs'  
        }  
    }  

    dependencies {  
          ...  
        compile(name: 'lib.5plus.base-release', ext: 'aar')  
        ...  

    }  

7 准备工作做完了。 不要高兴太早。

 切记一定要【 clean project】一定要【 clean project】一定要【 clean project】 太坑爹呀。  
 如果不【 clean project】,直接【run】,更新了的 本地资源【/assets/apps/__UNI__342FBEF】不会打包到apk中。 坑爹呀。  
继续阅读 »

1.建立Android基础工程,不使用任何插件,只需导入:

lib.5plus.base-release.aar

2.HBuiderX 里创建工程, 生成本地资源:

如:xxx/UNI342FBEF/www 文件夹
PS:切记一定要把之前的资源xxx/UNI342FBEF/www 删除,再生成。否则不会生成最新的,改动的内容没有打包进去。【浪费了好多好多时间】

3.将2中生成的本地资源,拷贝到 Android项目中的 /assets/apps/ 下。

PS:切记不要修改文件夹的名称 UNI342FBEF/www 【不要修改 不要修改 不要修改】

4. /assets/data/文件夹下 三个文件

1)dcloud_control.xml     
       **本文件中的  appid  是 3 中的 __UNI__342FBEF。必须保持一致**  
2)dcloud_error.html   
3)dcloud_properties.xml   
      本文件中 添加插件  

5. 有两种方式使用 HBuilderX生成的本地资源

1)WebAPP方式

     a) 直接拷贝下载的 SDK包里的  HBuilder-Integrate-AS 工程中的  SDK_WebApp.java文件到自己的项目中。  
     b)SDK_WebApp.java文件中修改如下:   
     public void onCoreInitEnd(ICore coreHandler) {  

    // 表示Webapp的路径在 file:///android_asset/apps/HelloH5  
    String appBasePath = "/apps/__UNI__342FBEF";  
    }  

      c) 修改 AndroidManifest.xml文件:  
          1)必须添加权限:  
             <uses-permission android:name="android.permission.INTERNET" />  
           2)<application 是否修改 无所谓,如果修改如下:  
                    ```javascript  
                    <application  
                      tools:replace="android:name"  
                      android:name="com.fandy.plugins.PluginsApp" //自己的Application  
                         ...  
            3)注册activity  
                    <activity  
                      android:name=".SDK_WebApp"  
                           ...  

2)WebView方式

     a) 直接拷贝下载的 SDK包里的  HBuilder-Integrate-AS 工程中的  SDK_WebView.java文件到自己的项目中。  
     b)SDK_WebView.java文件中修改如下:   
            @Override  
public void onCoreInitEnd(ICore coreHandler) {  
    // 设置单页面集成的appid  
    String appid = "__UNI__342FBEF";  
    // 单页面集成时要加载页面的路径,可以是本地文件路径也可以是网络路径  
    String url = "file:///android_asset/apps/__UNI__342FBEF/www/__uniappservice.html";  
       **PS: url路径中的__uniappservice.html 是从 /assets/apps/__UNI__342FBEF/www 文件夹下 manifest.json文件中的 "launch_path" 值得到。**  

6 Android app build.gradle 文件修改:

    android {  
            ...  
        defaultConfig {  

            multiDexEnabled true  
            ndk {  
                abiFilters 'x86','armeabi'  //使用uniapp时必须同时选择二者或选其一  
            }  

        }  
               ...  

        //使用uniapp时,需复制下面代码  
        /*代码开始*/  
        aaptOptions {  
            additionalParameters '--auto-add-overlay'  
            //noCompress 'foo', 'bar'  
            ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"  
        }  
        /*代码结束*/  
    }  

    repositories {  
        flatDir {  
            dirs 'libs'  
        }  
    }  

    dependencies {  
          ...  
        compile(name: 'lib.5plus.base-release', ext: 'aar')  
        ...  

    }  

7 准备工作做完了。 不要高兴太早。

 切记一定要【 clean project】一定要【 clean project】一定要【 clean project】 太坑爹呀。  
 如果不【 clean project】,直接【run】,更新了的 本地资源【/assets/apps/__UNI__342FBEF】不会打包到apk中。 坑爹呀。  
收起阅读 »

可以集成mob的ShareSDK的5plus包

HBuilderX 5+App开发 5+sdk

已加入Mob SDK初始化的5plus包,可以离线打包时集成ShareSDK
要修改第三方aar包的请看
Android修改第三方.aar后重新打包

链接: https://pan.baidu.com/s/1tEEZem6zP8zm6YpNRt1OCQ 提取码: zqvr

继续阅读 »

已加入Mob SDK初始化的5plus包,可以离线打包时集成ShareSDK
要修改第三方aar包的请看
Android修改第三方.aar后重新打包

链接: https://pan.baidu.com/s/1tEEZem6zP8zm6YpNRt1OCQ 提取码: zqvr

收起阅读 »

uni-app 开发支付宝/百度小程序注意事项

uniapp

HBuilderX 1.3.5 起,支持支付宝和百度小程序的开发编译。

平台差异

百度小程序

已知的差异/问题:

  • 不支持属性选择器
  • 不支持 scoped
  • login / getUserInfo 等功能在模拟器(开发工具)上不能模拟
  • 支付功能模拟不了
  • map 组件在开发工具上预览效果不对,但是手机上是对的。
  • getSystemInfo 获取到的 windowHeight 在模拟器中值不正确,真机预览是正确的。
  • v-if 和 v-for 不可在同一标签下同时使用
  • 页面中引入自定义组件时,渲染的结果中外层会有一个 template 标签,这会导致部分选择器对应的样式匹配不上。
  • 未完待续...

支付宝小程序

支付宝小程序的规范差异相对较多,API 部分的差异请仔细参考文档说明:https://uniapp.dcloud.io/api/README

比较明显的一个点就是,媒体部分支付宝小程序只有图片,而没有音视频。

支付宝分包,需要HBuilderX 2.2.3 alpha以上版本才支持。

已知的差异/问题:

  • showLoading 是不透传的,也就是说 loading 显示的时候无法点击页面内容。
  • 文件名或文件夹名中不允许出现 @ 符号
  • 网络请求返回的数据会严格按照 dataType 进行处理,如果不符合规范则会跑错错误,而不是按照原格式返回。
  • canvas 组件的标识是 id,而不是 canvas-id。目前还未进行处理,所以需要主动添加 id 属性。
  • 目前测试的结果,导航栏只有设置背景颜色为 #FFF(FFF) 时才会变成黑色文字。
  • 支付宝小程序的导航栏是支持透明渐变效果的,后面会提供相关的配置。
  • 使用伪元素做边框时,高度值不能用 1upx,需要直接用 1px。
  • 不支持 ECharts
  • 支付功能模拟不了
  • 未完待续...

更多差异

小伙伴们如果有其它发现,欢迎在社区向我们反馈,共同完善 uni-app 生态。

更多实现的细节,还在持续完善中。如果在开发过程中遇到一些问题或发现差异,在向我们反馈之前,建议阅读下相应平台的文档,以便更加精准地定位问题。

继续阅读 »

HBuilderX 1.3.5 起,支持支付宝和百度小程序的开发编译。

平台差异

百度小程序

已知的差异/问题:

  • 不支持属性选择器
  • 不支持 scoped
  • login / getUserInfo 等功能在模拟器(开发工具)上不能模拟
  • 支付功能模拟不了
  • map 组件在开发工具上预览效果不对,但是手机上是对的。
  • getSystemInfo 获取到的 windowHeight 在模拟器中值不正确,真机预览是正确的。
  • v-if 和 v-for 不可在同一标签下同时使用
  • 页面中引入自定义组件时,渲染的结果中外层会有一个 template 标签,这会导致部分选择器对应的样式匹配不上。
  • 未完待续...

支付宝小程序

支付宝小程序的规范差异相对较多,API 部分的差异请仔细参考文档说明:https://uniapp.dcloud.io/api/README

比较明显的一个点就是,媒体部分支付宝小程序只有图片,而没有音视频。

支付宝分包,需要HBuilderX 2.2.3 alpha以上版本才支持。

已知的差异/问题:

  • showLoading 是不透传的,也就是说 loading 显示的时候无法点击页面内容。
  • 文件名或文件夹名中不允许出现 @ 符号
  • 网络请求返回的数据会严格按照 dataType 进行处理,如果不符合规范则会跑错错误,而不是按照原格式返回。
  • canvas 组件的标识是 id,而不是 canvas-id。目前还未进行处理,所以需要主动添加 id 属性。
  • 目前测试的结果,导航栏只有设置背景颜色为 #FFF(FFF) 时才会变成黑色文字。
  • 支付宝小程序的导航栏是支持透明渐变效果的,后面会提供相关的配置。
  • 使用伪元素做边框时,高度值不能用 1upx,需要直接用 1px。
  • 不支持 ECharts
  • 支付功能模拟不了
  • 未完待续...

更多差异

小伙伴们如果有其它发现,欢迎在社区向我们反馈,共同完善 uni-app 生态。

更多实现的细节,还在持续完善中。如果在开发过程中遇到一些问题或发现差异,在向我们反馈之前,建议阅读下相应平台的文档,以便更加精准地定位问题。

收起阅读 »

前端-聊天页面Chat

在此整理给那些工作中需要用到的人,配合workman在项目已经正常使用,后期将会提供开发版

在此整理给那些工作中需要用到的人,配合workman在项目已经正常使用,后期将会提供开发版

mui关于设置沉浸模式的坑

沉浸式状态栏

本贴接原贴:http://ask.dcloud.net.cn/article/35389

在mui里面设置沉浸式,我知道大家都看过很多其他大佬的教程,我为什么还要写这篇的,因为有的时候在实际操作上会遇到你想不到的
一些问题,这里我来给大家仔细解析下:
1.配置manifest.json 配置文件目录
源码如下:一个ios和一个google的

"apple": {  
                "UIReserveStatusbarOffset":false  
            },  
            "google": {  
                "ImmersedStatusbar":true  
                },

2.开启配置,在节点plus下新加一个节点statusbar,如下:

    "plus": {  
        "splashscreen": {  
            "autoclose": true,/*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/  
            "waiting": false,"delay":"5"  
        },  
        "statusbar": {  
            "immersed":true,  
            "style":"dark"  
            },

3.配置完成后,mui就已经是沉浸模式了,下面我觉得才是重要的:
大家都知道,现在手机屏幕多样化,我们需要适配不同的屏幕,这时候我们要获取标题的高度,标题到顶点的高度,是否全面屏等,自适应的来配置。在这里我吃了个亏,研究了好久才解决,就是大家采用底部div栏的时候,会给子页面设置高度,我们在配置里要关注到这一点。

    function setAutoHeight() {  
                var topoffset = '45px';  
                var header = document.getElementById('myhead');  
                var title = document.getElementById('mytitle');  
                if(plus.navigator.isImmersedStatusbar()) {  
                    // 兼容immersed状态栏模式            
                    // 获取状态栏高度并根据业务需求处理,这里重新计算了子窗口的偏移位置           
                    topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45);  
                    header.style.height = topoffset + 'px';  
                    header.style.paddingTop = (topoffset - 45) + 'px';  
                    subpage_style.top = topoffset + 'px';  
                }  
            }

一个header 一个标题
<header id="myhead">
<h1 id="mytitle" class="mui-title" style="z-index: 111111;">
睁眼看世界
</h1>
</header>

因为用了底部的分栏,所以最后要动态的处理下 subpage的top

效果图如下:

刘海屏体验非常好
下载地址:

继续阅读 »

本贴接原贴:http://ask.dcloud.net.cn/article/35389

在mui里面设置沉浸式,我知道大家都看过很多其他大佬的教程,我为什么还要写这篇的,因为有的时候在实际操作上会遇到你想不到的
一些问题,这里我来给大家仔细解析下:
1.配置manifest.json 配置文件目录
源码如下:一个ios和一个google的

"apple": {  
                "UIReserveStatusbarOffset":false  
            },  
            "google": {  
                "ImmersedStatusbar":true  
                },

2.开启配置,在节点plus下新加一个节点statusbar,如下:

    "plus": {  
        "splashscreen": {  
            "autoclose": true,/*是否自动关闭程序启动界面,true表示应用加载应用入口页面后自动关闭;false则需调plus.navigator.closeSplashscreen()关闭*/  
            "waiting": false,"delay":"5"  
        },  
        "statusbar": {  
            "immersed":true,  
            "style":"dark"  
            },

3.配置完成后,mui就已经是沉浸模式了,下面我觉得才是重要的:
大家都知道,现在手机屏幕多样化,我们需要适配不同的屏幕,这时候我们要获取标题的高度,标题到顶点的高度,是否全面屏等,自适应的来配置。在这里我吃了个亏,研究了好久才解决,就是大家采用底部div栏的时候,会给子页面设置高度,我们在配置里要关注到这一点。

    function setAutoHeight() {  
                var topoffset = '45px';  
                var header = document.getElementById('myhead');  
                var title = document.getElementById('mytitle');  
                if(plus.navigator.isImmersedStatusbar()) {  
                    // 兼容immersed状态栏模式            
                    // 获取状态栏高度并根据业务需求处理,这里重新计算了子窗口的偏移位置           
                    topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45);  
                    header.style.height = topoffset + 'px';  
                    header.style.paddingTop = (topoffset - 45) + 'px';  
                    subpage_style.top = topoffset + 'px';  
                }  
            }

一个header 一个标题
<header id="myhead">
<h1 id="mytitle" class="mui-title" style="z-index: 111111;">
睁眼看世界
</h1>
</header>

因为用了底部的分栏,所以最后要动态的处理下 subpage的top

效果图如下:

刘海屏体验非常好
下载地址:

收起阅读 »

最近用MUI写了个资讯类的app,适配所有阅读类,准备开源出来给大家

开源

先放效果图

首先介绍下,实现的功能:
1.幻灯片切换

  1. 列表上拉加载更多,下拉刷新
  2. 分类
  3. 采用h5+实现软件内部自动更新版本。
  4. 完美设置mui沉浸式效果
  5. 大家如果有需要可以提供.net版的后台服务管理源码给大家参考
  6. 分享到朋友圈
  7. 后台消息推送

这个app功能不太复杂,主要也是改了一部分官方的代码,整体功能非常流畅,可以媲美原生效果。
在全面屏和非全面屏上都试过沉浸效果,非常好。
后面会分开讲解其中一些技术点:
1.完美设置mui沉浸式效果: http://ask.dcloud.net.cn/article/35390

github地址:
https://github.com/zuiyuewentian/NewsPublish

给一个下载测试体验:

继续阅读 »

先放效果图

首先介绍下,实现的功能:
1.幻灯片切换

  1. 列表上拉加载更多,下拉刷新
  2. 分类
  3. 采用h5+实现软件内部自动更新版本。
  4. 完美设置mui沉浸式效果
  5. 大家如果有需要可以提供.net版的后台服务管理源码给大家参考
  6. 分享到朋友圈
  7. 后台消息推送

这个app功能不太复杂,主要也是改了一部分官方的代码,整体功能非常流畅,可以媲美原生效果。
在全面屏和非全面屏上都试过沉浸效果,非常好。
后面会分开讲解其中一些技术点:
1.完美设置mui沉浸式效果: http://ask.dcloud.net.cn/article/35390

github地址:
https://github.com/zuiyuewentian/NewsPublish

给一个下载测试体验:

收起阅读 »

【全开源+免费更新】doodoo.js项目结构

node nodejs 支付宝小程序 微信小程序 小程序

简介
​ Doodoo.js -- 中文最佳实践Node.js快速开发框架。支持Koa.js, Express.js中间件,支持模块机制,插件机制,钩子机制,让开发 Node.js 项目更加简单、高效、灵活。

项目结构

 |-- app  
   |   |-- demo  
   |   |   |-- controller  
   |   |   |   |-- home  
   |   |   |   |   |-- index.js  
   |   |   |   |   `-- base.js  
   |   |   |   |-- admin  
   |   |   |-- model  
   |   |   |-- hook.js  
   |-- logs  
   |-- node_modules  
   |-- www  
   |-- app.js  
   |-- package.json

app
源代码目录

app/demo/controller
模块控制器目录

app/demo/model
模块模型目录

app/demo/hook.js
模块钩子文件

www
静态文件目录,存放图片,样式等文件的目录

app.js
项目启动入口文件

doodoo.js官方文档:https://doodooke.github.io/doodoo.js/#/
【案例】多多客小程序官网:doodooke.com

继续阅读 »

简介
​ Doodoo.js -- 中文最佳实践Node.js快速开发框架。支持Koa.js, Express.js中间件,支持模块机制,插件机制,钩子机制,让开发 Node.js 项目更加简单、高效、灵活。

项目结构

 |-- app  
   |   |-- demo  
   |   |   |-- controller  
   |   |   |   |-- home  
   |   |   |   |   |-- index.js  
   |   |   |   |   `-- base.js  
   |   |   |   |-- admin  
   |   |   |-- model  
   |   |   |-- hook.js  
   |-- logs  
   |-- node_modules  
   |-- www  
   |-- app.js  
   |-- package.json

app
源代码目录

app/demo/controller
模块控制器目录

app/demo/model
模块模型目录

app/demo/hook.js
模块钩子文件

www
静态文件目录,存放图片,样式等文件的目录

app.js
项目启动入口文件

doodoo.js官方文档:https://doodooke.github.io/doodoo.js/#/
【案例】多多客小程序官网:doodooke.com

收起阅读 »