HB-mui项目开发-驾考宝典
1，

需要课程的加QQ:3340563142

平台

uni-app 是一个跨平台的开发框架，运行到不同的平台时会遵循相关平台的规范也会受平台的限制。
因此，当开发 uni-app 出现问题时，一定要确认的是在哪个平台存在问题。

App

在 HBuilderX 中运行，选择『运行到手机或模拟器』，对应的平台就是 App/5+App。

App 又划分为 Android 和 iOS 两个平台，以及真机调试和打包之后两种环境。

无论是 Android 还是 iOS，操作系统版本的不同同样会引发一些差异性的问题。因此遇到问题后，多测试几个设备可以进一步帮助定位问题。

那么，如果是在 App 平台出现了问题，首先要明确是真机调试环境还是打包之后，然后是 Android、iOS，最后附带上手机设备的信息截图。

小程序

目前支持微信小程序，百度等小程序平台的支持，也在开发中。

微信小程序

在 HBuilderX 中运行，选择『运行到小程序模拟器』，对应的平台就是微信小程序。

微信小程序其实也划分为模拟器环境和真机环境。

如果通过微信开发者工具开发出现了问题，请先运行到 App 平台对比一下是否也存在同样的问题，因为有些问题可能是微信小程序本身的限制或存在的 bug。有些具体的问题，可能还需要通过微信开发者工具的真机调试来对比测试。

H5

在 HBuilderX 中运行，选择『运行到浏览器』，对应的平台就是 H5。

这就是普通的 Web 项目，运行在浏览器环境的，因此一些常见问题可以通过搜索来直接定位确认。

最为典型的问题，就是开发期间的跨域请求。App 和小程序已经通过原生引擎处理过了，开发者不需要再做处理。但是在浏览器环境，这个限制是始终存在的。开发期间，可以参考：https://ask.dcloud.net.cn/article/35232 中提供的方案来处理。

问题描述

主要描述重现问题的操作步骤，这样有利于其他人快速重现问题。

除了文字描述，还可以选择截图以及短视频来更加明确地展示问题。

代码

通过上传的项目源码，再配合前面的问题描述，其他人拿到代码后就可以直接运行并尝试重现问题了。如果不方便直接上传项目源码，也请精简一下提供一个可以直接运行起来的 demo。

有些问题，单靠贴代码片段，是无法定位的。在上传 demo 的时候要注意，尽量不要只上传一个页面的文件，而遗漏了其引入的图片以及组件等资源。所以，最好还是摘出来一个单独的项目。

最后

以上这些信息，对于测试定位问题都十分关键，大家在反馈问题时不要嫌麻烦而遗漏一些关键信息。不然还需要回复提醒补充信息，进而降低了测试定位问题的效率。

由于 QQ 群比较多而且聊天信息更多，一些问题可能会被遗漏掉。因此，大家遇到一些问题或疑惑时，请尽可能在社区发帖进行交流。感谢大家的理解与配合。

注意，我的问题不是说ajax加载出的分类不滑动了，而是滚动的时候不能自动定位。废话不多放，上图：

//获得slider插件对象  
var gallery = mui('.mui-slider');  
gallery.slider({  
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；  
});

试了并没有用，这个只能解决ajax拉数据后不能滚动的问题。

找了半天，看到mui框架里这段注释了（在代码的4837行，我用的版本是：v3.7.0 ）：

    $.ready(function() {  
        //      setTimeout(function() {  
        $('.mui-slider').slider();  
        $('.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control').scroll({  
            scrollY: false,  
            scrollX: true,  
            indicators: false,  
            snap: '.mui-control-item'  
        });  
        //      }, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)  

    });

原来作者也找到这个问题了，还用了了临时的解决办法。是用的settimeout。可能考虑到影响整体效率又去掉了，这里我鄙视你一下。
我的解决办法
首先把这一段整体注释掉

    $.ready(function() {  
        //setTimeout(function() {  
        /*这里把默认的滚动去掉了，因为如果菜单是ajax调用的话，横向滚动无法自动移位  
        $('.mui-slider').slider();  
        $('.mui-scroll-wrapper.mui-slider-indicator.mui-segmented-control').scroll({  
            scrollY: false,  
            scrollX: true,  
            indicators: false,  
            snap: '.mui-control-item'  
        });*/  
        //      }, 500); //临时处理slider宽度计算不正确的问题(初步确认是scrollbar导致的)  
    });

然后在要用到slider的地方动态调用：

export default {  
    components:{  
        listData,  
    },    
    data(){  
        return{  
            catList:[],  
        }  
    },    
    methods:{  
        //栏目列表  
        getCatData:function(){  
            var obj=this;  
            this.$axios.get("/Cat/index/ajax/1/modelid/3/").then(function(response){  
                var data=response.data.info.data;  
                var count=response.data.info.count;  
                obj.catList=data;  
            })  
        },  
    },  
    mounted() {  
        //获取-栏目列表  
        this.getCatData();  
    },  
    updated:function(){  
        //mui切换  
        var slider=this.mui('.mui-slider');  
        slider.slider();  
    }     
}

我用的是vue框架开发的，如果你是用ajax的在你ajax拉出来后调用slider就可以了：

        var slider=this.mui('.mui-slider');  
        slider.slider();

看下成功后的效果吧：

因朋友介绍了解这个平台这个框架，感觉挺不错的样子；
然而加入官方群，里面各种乱象，一大堆各种闲人各种不相干技术问题各种闲聊，各种垃圾图片横飞，想看看技术相关问题解答（说不定以后会用得上），这种现象严重影响其他人的学习，影响管理人员查看问题。

建议加强管理群员聊天情况，净化技术交流空间，只作技术交流，促进社区良好的学习氛围！！！

忘官方重视~！！！！！

uni-app 调用原生socket实现与WiFi设备的直连通讯。

网上查阅了一下，关于相关方面的案例略少，借鉴了本论坛中一贴中的测试案例，在此表示感谢。CTRL+C +V 实现了demo app的socket的通讯。
也是使用java nio的轮询io非阻塞式来实现io读写。
本案例是测试demo，有什么不足，请各位指教，谢谢。

var inetSocketAddress = plus.android.importClass("java.net.InetSocketAddress");  
var ByteBuffer = plus.android.importClass("java.nio.ByteBuffer");  
var SelectionKey = plus.android.importClass("java.nio.channels.SelectionKey");  
var Selector = plus.android.importClass("java.nio.channels.Selector");  
var SocketChannel = plus.android.importClass("java.nio.channels.SocketChannel");  
var Iterator = plus.android.importClass("java.util.Iterator");  
var An_String = plus.android.importClass("java.lang.String");  

var StrictMode = plus.android.importClass("android.os.StrictMode");  
var Build = plus.android.importClass("android.os.Build");  
if (Build.VERSION.SDK_INT > 9) {  
    var policy = new StrictMode.ThreadPolicy.Builder().permitAll().build();  
    StrictMode.setThreadPolicy(policy);  
}  

var An_Selector = new Selector();  
var An_SocketChannel = new SocketChannel();  
var An_SelectionKey = new SelectionKey();  

var selector = null;  
var channel = null;  
var stop = false;   //进程控制  

try {  

    channel = An_SocketChannel.open();  
    //设置通道为非阻塞  
    channel.configureBlocking(false);  
    selector = An_Selector.open();  
    channel.connect(new inetSocketAddress("192.168.2.245", 6000));  
    channel.register(selector, An_SelectionKey.OP_CONNECT);  

    while (!stop) {  
        selector.select(1000);  

        var keys = selector.selectedKeys();  
        plus.android.importClass(keys);  
        var ite = keys.iterator();  
        plus.android.importClass(ite);  

        while (ite.hasNext()) {  
            An_SelectionKey = ite.next();  
            ite.remove();  

            if (An_SelectionKey.isConnectable()) {  
                if (channel.isConnectionPending()) {  
                    if (channel.finishConnect()) {  
                        if (channel.isConnected()) {  
                            // 设置成非阻塞  
                            channel.configureBlocking(false);  
                            //在和服务端连接成功之后，为了可以接收到服务端的信息，需要给通道设置读的权限。  
                            channel.register(selector, An_SelectionKey.OP_READ);  
                        }  
                    }  
                }  
            } else if (An_SelectionKey.isReadable()) {  
                // 检测到服务端的数据  
                var buffer = ByteBuffer.allocate(100);  
                var ret = channel.read(buffer);  
                if (ret == -1) {  
                    stop = true;  
                    console.log("server is unconnected");  
                } else {  
                    var data = buffer.array();  
                    var msg = new An_String(data).trim();  
                    console.log("client recive msg : " + msg);  
                    // 发送数据给客户端  
                    var data = new An_String("Im app " + msg);  
                    var outBuffer = new ByteBuffer.wrap(data.getBytes());  
                    channel.write(outBuffer);  
                    if ("by" == msg) {  
                        stop = true  
                    }  
                }  
            }  
        }  
    }  
} catch (e) {  
    console.log("run error : " + e)  
} finally {  
    try {  
        channel.close();  
    } catch (e) {  
        console.log("close error " + e);  
    }  
}

在设置了自定义的状态栏之后，状态栏的手机端上面状态栏的默认颜色为白色，更改方法为，在pages.json文件里里面，做出如下修改
"style":{
"app-plus":{
"statusbar":{
"background":"#ffffff"
}
}
}
但是修改完成之后，状态栏就会有高度，这样地话，就不需要在页面添加某个view高度为状态栏的高度了
但是还有有点懵逼，这个属性不是状态栏为沉浸式状态栏才能用的么？而且我是自定义的导航栏，不是文档里面写得是自定义的navignateStyle
会撑到导航栏里面去的么？为什么设置了状态栏的颜色之后就不会去里面了？求官方解答

温馨提示

本教程是1.x升级2.x手动升级指南。由于本次更新涉及到主框架更新，因此本次更新先提供手动升级指南。后续根据情况再进行推送升级。

| 2.x版本引入了npm包管理工具lerna，系统主要是有2个目录，一个是app目录，存放模块。另外一个是plugin目录，存放插件。

目录结构(重要)

javascript  
# 1.x代码结构  

app  

app.js  

context.js  

data  

docker.env  

Dockerfile  

...  

upgrade  

-- 1.x-to-2.x.sh  

-- doodoo (2.x代码存放目录)  

-- oneStepInstall.sh

升级步骤

1.打开链接https://gitee.com/doodooke/doodoo，下载2.0开源版；

2.执行命令yarn && npm run bootstrap，安装依赖；

3.执行命令npm run dev，启动开发者模式；

4.打开127.0.0.1:3000，登录插件市场，下载相应版本插件；

5.执行1.x-to-2.x.sh脚本，完成1.x版本升级2.x版本；

6.执行pm2 delete doodooke && pm2 start pm2.json，完成升级。

常见问题

1.x版本号默认是3000端口，安装插件之前，需要修改2.x端口号。

2..env配置项需要修改配置CMD_INSTALL && CMD_BUILD，修改内容如下

CMD_INSTALL=yarn install && npm run bootstrap

CMD_BUILD=npm run bootstrap && npm run web:build

3.nginx配置，新增default_server支持代理商

server {

servername ;

listen 80 default_server;

set $node_port 3000;

location / {

proxy_http_version 1.1;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header Host $http_host;

proxy_set_header X-NginX-Proxy true;

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

proxy_pass http://127.0.0.1:$node_port$request_uri;

proxy_redirect off;

}

}

脚本内容

1.x-to-2.x.sh

# 拷贝配置文件  

cp ./../.env ./doodoo  

cp ./../.env.web ./doodoo  

cp ./../docker.env ./doodoo  

cp ./../LICENSE.key ./doodoo  

# 拷贝favicon  

cp ./../web/static/favicon.ico ./doodoo/www  

# 拷贝logo  

cp -r ./../data/logo ./doodoo/www/logo  

# 拷贝web static  

cp -r ./../web/static/assets ./doodoo/www/assets  

# 拷贝web www  

cp -r ./../web/static/www ./doodoo/www/www

创建插件&模块

| 创建插件前需要执行命令npm i -g lerna全局安装lerna。doodooke默认使用lerna管理npm包，lerna的使用方式，参考https://github.com/lerna/lerna

创建模块

例子：创建a模块

执行命令lerna create a app

注意：a模块的package.json的name字段值应该是a

模块目录参考

模块 a 目录参考

a

-- controller（控制器存放文件夹）

-- model（数据库model存放文件夹）

-- node_modules

-- sql（sql存放文件夹）

-- static（可以在vue里面引用）

-- view（vue页面）

-- www（可以直接通过域名访问的资源）

-- hook.js（钩子）

-- package.json

-- README.md

-- yarn.lock

创建插件

例子：创建b插件

执行命令lerna create b plugin

注意：b插件的package.json的name字段的值应该是doodoo-plugin-b

b

-- lib

-- node_modules

-- package.json

-- README.md

-- yarn.lock

多多客（doodooke.com）更新日志20181130

1、小程序端显示商品销量；

2、营销订单增加按照支付状态、订单号、订单状态、下单时间等搜索；

3、主题颜色增加白色、橙色、黄色；

4、商品详情页图片全屏展示；

5、商品后台订单管理显示详细的物流信息；

6、增加家电维修、婴儿游泳馆、服装小程序模板；

7、点击事件增加分销、会员卡、优惠券；

8、文章支持跳转到列表和单篇两种方式；

9、文章转发显示文章标题而不是小程序名称；

10、注册登录页面和商家管理后台增加官网客服；

11、新增新零售下单限制下单距离；

12、超管功能重构；

13、cms文章seo标题优化；

14、新增支持自定义web页面，css。

1. 由于方法在网站上都能搜到，则提供一个链接，以便与参考：
   原文：https://www.cnblogs.com/stulzq/p/5123875.html

2. 注意事项
   通过以上方法可以使HBuilder与夜神模拟器建立链接，但是还不能直接使用；需要修改HBuilder中有关Android的端口才行；
   如图：
   1）点击工具--》选项，修改端口号
   

   

   2） 重启HBuilder软件

1. 在HBuilder中新建Hello mui示例：
   
   
2. 找到文件夹example：
   
   
3. 寻找文件im-chat.html:
   
   

分析一款中国传统风格企业网站风水堪舆企业网站html静态模板，需要的站长到八叔模板堂看看

最近开发运营了一款APP产品，一个偶然的机会发现了一个帖子https://www.jianshu.com/p/ed8c707a2354，一个免费的智能客服工具，于是花了半天研究了一下，很快就把它集成到了APP里，分享给可能有需要的站友

1 npm install flyio -S
2 新建文件/util/request.js
import flyio from 'flyio'
//设置超时
flyio.config.timeout = 20000;
//设置请求基地址
flyio.config.baseURL = '***'

// 添加请求拦截器
flyio.interceptors.request.use((request) => {
// 在发送请求之前做些什么
let token = uni.getStorageSync('aliToken')
if (token) {
request.headers['token'] = token
}
return request
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})

flyio.interceptors.response.use((res) => {
// 对响应数据做些事
// if (!res.data) {
// return Promise.reject(res)
// }
return res
}, (error) => {
return Promise.reject(error)
})
const ajaxMethod = ['get', 'post']
const Api = {}
ajaxMethod.forEach((method) => {
Api[method] = function (uri, data, config) {
return new Promise(function (resolve, reject) {
flyio[method](uri, data, config).then((response) => {
if (response.data.StatusCode === 200) {
if (response.headers.token) {
console.log(response)
// console.log(response.headers.token)
uni.setStorageSync('aliToken', response.headers.token)
uni.setStorageSync('isFirstLogin', true)
}
resolve(response.data)
} else {
uni.showToast({
title: response.data.Message || 'fetch data error',
duration: 3000,
icon: 'none'
})
}
}).catch(function (error) {
if (error.response && error.response.status === 401) {
// 请求已发出，但服务器响应的状态码不在 2xx 范围内
let isFirstLogin = uni.getStorageSync('isFistLogin')
if (isFirstLogin) {
uni.showToast({
title: '登录信息失效',
duration: 3000,
icon: 'none'
})
}
uni.setStorageSync('updateUserInfo', '')
uni.removeStorageSync('aliToken')
// 进入首页
// console.log(error.response.data)
// console.log(error.response.status)
// console.log(error.response.headers)
} else {
console.log(error)
// Something happened in setting up the request that triggered an Error
// console.log('Error', error.message)
}
// console.log(error.config)
})
})
}
})

export default Api

3 挂载到vue实例 （main.js）
import Api from './util/request.js'
Vue.prototype.$flyio = Api

4 调用
this.$flyio.get(urls.userInfo).then((res) => {
console.log(res)
uni.showToast({
title: '获取信息成功',
icon: 'success'
})
})

5 说明
登录成功，返回信息包含token，之后的请求需要将token设置到request的headers中，每个请求请求成功后需要获取response中的token并更新token的值；后端需要放开option请求；