HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uniapp 自定义导航栏更改状态栏颜色

沉浸式状态栏 uniapp

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

继续阅读 »

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

收起阅读 »

多多客DOODOOKE 1.x升级2.x指南

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

温馨提示

本教程是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.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。

收起阅读 »

HBuilder使用夜神模拟器调试Android应用

调试模式常见问题
  1. 由于方法在网站上都能搜到,则提供一个链接,以便与参考:
    原文:https://www.cnblogs.com/stulzq/p/5123875.html

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

    2) 重启HBuilder软件

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

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

    2) 重启HBuilder软件

收起阅读 »

寻找apk中的聊天窗口

  1. 在HBuilder中新建Hello mui示例:
  2. 找到文件夹example:
  3. 寻找文件im-chat.html:
继续阅读 »
  1. 在HBuilder中新建Hello mui示例:
  2. 找到文件夹example:
  3. 寻找文件im-chat.html:
收起阅读 »

中国传统风格企业网站风水堪舆企业网站html静态模板

html

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

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

如何为手机APP添加智能客服功能?

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

最近开发运营了一款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请求;

继续阅读 »

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请求;

收起阅读 »

<component :is="item" v-for="item in list"></component> 无法支持小程序和app官方没有说明 或者有什么代替方案么

<component :is="item" v-for="item in list"></component> 无法支持小程序和app官方没有说明 或者有什么代替方案么

<component :is="item" v-for="item in list"></component> 无法支持小程序和app官方没有说明 或者有什么代替方案么

流应用发展方向(建议)

流应用

建议把百度 京东 搜索,那些热门应用去掉,那些体验并不好,都是简版的,
搜索是流应用的入口,应该搜索 推荐 流应用产品
用流应用的开发者,都是不能上ios,才用的,流应用就是自己应用的外壳
开发者最希望,自己的应用唯一,没有其他竞品,没有广告
用户是不会主动下载 流应的,
都是开发者 强行让用户下载使用
中大应用,也不会用流应用,有小程序了
所以流应用的主要用户,就是小开发者的ios端用户

继续阅读 »

建议把百度 京东 搜索,那些热门应用去掉,那些体验并不好,都是简版的,
搜索是流应用的入口,应该搜索 推荐 流应用产品
用流应用的开发者,都是不能上ios,才用的,流应用就是自己应用的外壳
开发者最希望,自己的应用唯一,没有其他竞品,没有广告
用户是不会主动下载 流应的,
都是开发者 强行让用户下载使用
中大应用,也不会用流应用,有小程序了
所以流应用的主要用户,就是小开发者的ios端用户

收起阅读 »

[持续更新]hbuilderX和vscode 常用快捷键一览

快捷键

hbuilderX
添加下一个匹配项 ctrl e
添加所有匹配项 ctrl alt e
向上搜索选中单词 f3
向下搜索选中单词shift f3
复制当前行 ctrl c
向上移动一行 ctrl up arrow
格式化代码 ctrl k
注释代码 ctrl /
撤销 ctrl z
恢复撤销 ctrl y
查找文件 ctrl p
查找字符串(当前文件) ctrl f
查找字符串(当前目录)ctrl alt f
跳转到行 ctrl g
分栏操作同一文件 文件编辑框 右键文件--拆分标签卡

vscode
添加下一个匹配项 ctrl d
向上复制一行 alt shift up arrow
向上移动一行 alt up arrow
格式化代码 alt shift f
注释代码 ctrl /
撤销 ctrl z
恢复撤销 ctrl y
查找文件 ctrl p
查找字符串(当前文件) ctrl f
查找字符串(当前目录)ctrl shift f
跳转到行 ctrl g
分栏操作同一文件 ctrl \

继续阅读 »

hbuilderX
添加下一个匹配项 ctrl e
添加所有匹配项 ctrl alt e
向上搜索选中单词 f3
向下搜索选中单词shift f3
复制当前行 ctrl c
向上移动一行 ctrl up arrow
格式化代码 ctrl k
注释代码 ctrl /
撤销 ctrl z
恢复撤销 ctrl y
查找文件 ctrl p
查找字符串(当前文件) ctrl f
查找字符串(当前目录)ctrl alt f
跳转到行 ctrl g
分栏操作同一文件 文件编辑框 右键文件--拆分标签卡

vscode
添加下一个匹配项 ctrl d
向上复制一行 alt shift up arrow
向上移动一行 alt up arrow
格式化代码 alt shift f
注释代码 ctrl /
撤销 ctrl z
恢复撤销 ctrl y
查找文件 ctrl p
查找字符串(当前文件) ctrl f
查找字符串(当前目录)ctrl shift f
跳转到行 ctrl g
分栏操作同一文件 ctrl \

收起阅读 »

苹果APP真机测试和上架苹果应用商店视频教程

iOS iOS打包

本视频介绍iOS APP真机调试和上架App Store两个步骤。

详细介绍了iOS证书类型功能和申请方式,打包ipa安装手机真机测试和上传App Store审核过程。

希望可以帮助新手快速了解上架苹果APP流程,快速把自己的APP分发出去。

优酷

http://v.youku.com/v_show/id_XMzk0MTMyNDM2NA==.html?spm=a2hzp.8244740.0.0

继续阅读 »

本视频介绍iOS APP真机调试和上架App Store两个步骤。

详细介绍了iOS证书类型功能和申请方式,打包ipa安装手机真机测试和上传App Store审核过程。

希望可以帮助新手快速了解上架苹果APP流程,快速把自己的APP分发出去。

优酷

http://v.youku.com/v_show/id_XMzk0MTMyNDM2NA==.html?spm=a2hzp.8244740.0.0

收起阅读 »