HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

须知:微信h5音频视频无法自动播放

音频 视频 video

https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01

https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01

nvue canvas踩坑经历

Webview canvas GCanvas nvue uniapp

总结就是:用到绘制海报类似的地方(drawImage)不要用nvue。

  1. nvue 不支持普通的canvas api绘制。
  2. 然后找到了gcanvas这个东西,在iOS上还行,可以用。
  3. 然后到Android上一测,拉垮了。报错:exception function:gcanvas setBackGround for android view, exception:WX_REND大概原因就是gcanvas在安卓上绘制图像很容易各种问题,gcanvas是个第三方团队产品,uniapp官方在社区也曾说不推荐使用gcanvas。确实支持度不好。
  4. 没办法,gcanvas不能用在安卓上,只能再看看其他办法。然后采用了nvue+webview的方案,nvue使用webview加载hybrid本地html,准备用web canvas来绘制,一通操作猛如虎,嗯,安卓上能正常了
  5. 然后到iOS上一看,又拉跨了,canvas.toDataURL时报错了:the operation is insecure。翻译一下就是资源跨域问题。还奇怪呢,本地html引用的都是相对路径的本地资源,咋还会跨域,一通查一通找,发现了官方给出的解释:wkwebview环境本地资源也算跨域。好吧,没办法,那继续看看有没有办法解决吧。后面在社区里看了下发现有两种办法 1.plus.io 相关api读取为本地路径。2.本地资源转成base64。一通操作一通调试后没走通,大概原因就是1.nvue webview环境下,不能用plus api。2.本地资源转base64,大概方法也是走的原生xhr或者plus转换,但是原生xhr还有canvas.toDataURL在这种情况都是有跨域问题,plus同原因1一样,也没有支持。
  6. 最后,不纠结了,掉头吧。然后页面转为vue文件渲染。然后就ok了。

nvue这个东西官方也不维护了,虽然确实性能比vue强,但真不适合用纯nvue来做项目,巨多坑。还是见仁见智吧,合适场景下vue+nvue结合使用。

继续阅读 »

总结就是:用到绘制海报类似的地方(drawImage)不要用nvue。

  1. nvue 不支持普通的canvas api绘制。
  2. 然后找到了gcanvas这个东西,在iOS上还行,可以用。
  3. 然后到Android上一测,拉垮了。报错:exception function:gcanvas setBackGround for android view, exception:WX_REND大概原因就是gcanvas在安卓上绘制图像很容易各种问题,gcanvas是个第三方团队产品,uniapp官方在社区也曾说不推荐使用gcanvas。确实支持度不好。
  4. 没办法,gcanvas不能用在安卓上,只能再看看其他办法。然后采用了nvue+webview的方案,nvue使用webview加载hybrid本地html,准备用web canvas来绘制,一通操作猛如虎,嗯,安卓上能正常了
  5. 然后到iOS上一看,又拉跨了,canvas.toDataURL时报错了:the operation is insecure。翻译一下就是资源跨域问题。还奇怪呢,本地html引用的都是相对路径的本地资源,咋还会跨域,一通查一通找,发现了官方给出的解释:wkwebview环境本地资源也算跨域。好吧,没办法,那继续看看有没有办法解决吧。后面在社区里看了下发现有两种办法 1.plus.io 相关api读取为本地路径。2.本地资源转成base64。一通操作一通调试后没走通,大概原因就是1.nvue webview环境下,不能用plus api。2.本地资源转base64,大概方法也是走的原生xhr或者plus转换,但是原生xhr还有canvas.toDataURL在这种情况都是有跨域问题,plus同原因1一样,也没有支持。
  6. 最后,不纠结了,掉头吧。然后页面转为vue文件渲染。然后就ok了。

nvue这个东西官方也不维护了,虽然确实性能比vue强,但真不适合用纯nvue来做项目,巨多坑。还是见仁见智吧,合适场景下vue+nvue结合使用。

收起阅读 »

uniapp是否兼容安卓原生mlkit机器学习功能

兼容性

我在制作文字识别原生插件时,按照安卓原生文档引入com.google.mlkit:text-recognition-chinese:16.0.0库时,用hb导出的离线资源可以实现文字识别功能,但是制作原生插件后,一直报语言包里一个类不存在问题。

我在制作文字识别原生插件时,按照安卓原生文档引入com.google.mlkit:text-recognition-chinese:16.0.0库时,用hb导出的离线资源可以实现文字识别功能,但是制作原生插件后,一直报语言包里一个类不存在问题。

在开发xr-frame时,uni-app编译后的小程序代码丢失了width与height属性,导致图像模糊

HBuilderX uni_app

目前是还未全面支持xr-frame么?是否有折中的方法解决上面这个问题

目前是还未全面支持xr-frame么?是否有折中的方法解决上面这个问题

uniapp中,vue3版本中,怎么在App.vue中导入`/theme/theme_${mode}.scss`带变量的文件?

uniapp中,vue3版本中,怎么在App.vue中导入/theme/theme_${mode}.scss带变量的文件?

我尝试了 import(/theme/theme_${mode}.scss).then().catch(),但不被支持

let mode = uni.getStorageSync('theme') || 'light';
import(/* @vite-ignore */'/theme/theme_'+ mode +'.scss').then(() => {}).catch(error => {
console.error('失败原因:', error);
});

vite下,require(@/theme/theme_${mode}.scss) 用不了。

需要怎么做才能顺畅的解决问题?

继续阅读 »

uniapp中,vue3版本中,怎么在App.vue中导入/theme/theme_${mode}.scss带变量的文件?

我尝试了 import(/theme/theme_${mode}.scss).then().catch(),但不被支持

let mode = uni.getStorageSync('theme') || 'light';
import(/* @vite-ignore */'/theme/theme_'+ mode +'.scss').then(() => {}).catch(error => {
console.error('失败原因:', error);
});

vite下,require(@/theme/theme_${mode}.scss) 用不了。

需要怎么做才能顺畅的解决问题?

收起阅读 »

谷歌插件-TV影视资源解析程序代码分享

uniapp

前言

  • 通过“谷歌插件”+“阿里妈妈RPA平台”,实现实时发布影视资源数据
  • 需配合 电视TV影视APP 进行使用
  • 编写此文章,是为了给大家一个思路,剩下的部分,就靠大家的智慧自由发挥

谷歌插件安装方式

谷歌插件使用方法

  • 打开影视资源网站 https://www.freeok.pro/ 【其他平台影视解析程序类似,欢迎大家补充】
  • 找到想看的电影资源,点击到播放页面,会多出来一个按钮“点击这里”,我们直接去点击即可
  • 插件会自动复制资源影视JSON数据,数据demo如下
首页接口JSON数据  
[{"id":1,"cover":"","title":"周处除三害","movieFlag":"1","typeName":"电影"}]  
播放页接口JSON数据  
{"id":1,"comment":"","info":"","title":"周处除三害","movieFlag":"1","type":"single","resources":[{"website":"freeOk","movieUrl":"https://v9.douyinvod.com/9d76bd905715dc366bc48a003cf58a78/65ffbc54/video/tos/cn/tos-cn-v-6db89e/ogNh9hQ8tCEtgyP4gzaydXAjmhAhfQcsWMBEND/?okvip.mp4","movieFlag":"1"},{"website":"爱奇艺","movieUrl":null,"movieFlag":"0"}]}

借助在线rap工具发布HTTP服务

  • 访问阿里旗下RAP网站,http://rap2.taobao.org/account/login,注册账号
  • 创建一个仓库
  • 创建两个接口服务,具体接口数据参照下图,点击导入按钮复制谷歌插件获取的JSON数据
  • 接口服务创建好之后,点击接口地址,即可查看HTTP服务地址,如下图

效果演示

文章分享

开源插件分享

交流方式

  • WX:cqcq8080
  • QQ:534780006
继续阅读 »

前言

  • 通过“谷歌插件”+“阿里妈妈RPA平台”,实现实时发布影视资源数据
  • 需配合 电视TV影视APP 进行使用
  • 编写此文章,是为了给大家一个思路,剩下的部分,就靠大家的智慧自由发挥

谷歌插件安装方式

谷歌插件使用方法

  • 打开影视资源网站 https://www.freeok.pro/ 【其他平台影视解析程序类似,欢迎大家补充】
  • 找到想看的电影资源,点击到播放页面,会多出来一个按钮“点击这里”,我们直接去点击即可
  • 插件会自动复制资源影视JSON数据,数据demo如下
首页接口JSON数据  
[{"id":1,"cover":"","title":"周处除三害","movieFlag":"1","typeName":"电影"}]  
播放页接口JSON数据  
{"id":1,"comment":"","info":"","title":"周处除三害","movieFlag":"1","type":"single","resources":[{"website":"freeOk","movieUrl":"https://v9.douyinvod.com/9d76bd905715dc366bc48a003cf58a78/65ffbc54/video/tos/cn/tos-cn-v-6db89e/ogNh9hQ8tCEtgyP4gzaydXAjmhAhfQcsWMBEND/?okvip.mp4","movieFlag":"1"},{"website":"爱奇艺","movieUrl":null,"movieFlag":"0"}]}

借助在线rap工具发布HTTP服务

  • 访问阿里旗下RAP网站,http://rap2.taobao.org/account/login,注册账号
  • 创建一个仓库
  • 创建两个接口服务,具体接口数据参照下图,点击导入按钮复制谷歌插件获取的JSON数据
  • 接口服务创建好之后,点击接口地址,即可查看HTTP服务地址,如下图

效果演示

文章分享

开源插件分享

交流方式

  • WX:cqcq8080
  • QQ:534780006
收起阅读 »

To D云:强制用户使用贵司 IDE 进行打包是否合理?

项目运行 打包

无法通过审核,见图

无法通过审核,见图

ios开发scroll-view横向滚动失效,scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可

scrollview

更正——这个问题有了最新的解决方案:
给scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可。经验证,ios、安卓段子展示均正常。
示例代码如下:

     <!-- 头部二级导航 -->  
        <scroll-view  
          class="header flex_wrap flex_row flex_left flex_middle"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
          <view class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>

如上, flex_row,flex_left,flex_middle均为封装好的样式,即横向、水平靠左、垂直居中布局。
————————————————————————————————————————————
老bug了,本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的,但是IOS App开发中子元素高度必须要大于scroll-view宽度才能滚动,应该是拿错参数了。
官方一直没解决这个问题,都是在自己摸索。
做了不少尝试,总算找到不影响页面布局展示的方法了。
解决方案:
用一个透明的宽度为1像素的占位View把内部容器的高度撑大,高度为子元素的总宽度,这样无论有多少个子元素,都能做到自适应滚动了。

具体操作如下:

  1. 在ScrollView里边给子元素列表添加一个父容器btnBox(如果已有就不用了)。
  2. 在获取到子元素数据之后通过dom.getComponentRect来获取btnBox的总宽度(图中蓝框所示)。
  3. 在btnBox前边或者后边添加一个同级的宽度为1像素的占位view,高度设置为btnBox的宽度(颜色设置为透明,避免部分机型可能会有的默认颜色)。

问题完美解决,横向可以滚动了,也不影响界面展示。
示例代码如下:

       <scroll-view  
          class="header flex_wrap flex_center bg_grey flex_top on"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
         <view id="navStart" class="bg_red" style="width:1rpx;" :style="{ height: subNavWidth * 2 + 'rpx' }"></view>  
          <view ref="subNav" class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>
      var refDom = this.$refs.subNav;  
      var result = dom.getComponentRect(refDom, option => {  
        this.subNavWidth = option.size.width;  
      });
继续阅读 »

更正——这个问题有了最新的解决方案:
给scroll-view添加flex-row样式、内部子元素添加一个flex-row的父容器即可。经验证,ios、安卓段子展示均正常。
示例代码如下:

     <!-- 头部二级导航 -->  
        <scroll-view  
          class="header flex_wrap flex_row flex_left flex_middle"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
          <view class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>

如上, flex_row,flex_left,flex_middle均为封装好的样式,即横向、水平靠左、垂直居中布局。
————————————————————————————————————————————
老bug了,本来横向滚动只要子元素宽度大于scroll-view固定宽度就可以滚动的,但是IOS App开发中子元素高度必须要大于scroll-view宽度才能滚动,应该是拿错参数了。
官方一直没解决这个问题,都是在自己摸索。
做了不少尝试,总算找到不影响页面布局展示的方法了。
解决方案:
用一个透明的宽度为1像素的占位View把内部容器的高度撑大,高度为子元素的总宽度,这样无论有多少个子元素,都能做到自适应滚动了。

具体操作如下:

  1. 在ScrollView里边给子元素列表添加一个父容器btnBox(如果已有就不用了)。
  2. 在获取到子元素数据之后通过dom.getComponentRect来获取btnBox的总宽度(图中蓝框所示)。
  3. 在btnBox前边或者后边添加一个同级的宽度为1像素的占位view,高度设置为btnBox的宽度(颜色设置为透明,避免部分机型可能会有的默认颜色)。

问题完美解决,横向可以滚动了,也不影响界面展示。
示例代码如下:

       <scroll-view  
          class="header flex_wrap flex_center bg_grey flex_top on"  
          scroll-x="true"  
          :scroll-into-view="scroll_into_view0"  
          scroll-with-animation="true"  
          show-scrollbar="false"  
        >  
         <view id="navStart" class="bg_red" style="width:1rpx;" :style="{ height: subNavWidth * 2 + 'rpx' }"></view>  
          <view ref="subNav" class="flex_row">  
            <text  
              :id="'nav' + index"  
              class="btn f12 border_radius30"  
              :class="activeIndex2 == index ? 'active bg_grey' : 'bg_white'"  
              @click="headerNavClick(index)"  
              v-for="(item, index) in topNavList"  
              :key="index"  
            >  
              {{ item.sub_rack_name }}  
            </text>  
          </view>  
        </scroll-view>
      var refDom = this.$refs.subNav;  
      var result = dom.getComponentRect(refDom, option => {  
        this.subNavWidth = option.size.width;  
      });
收起阅读 »

关于uni-forms组件的bug【提交的字段['*']在数据库中并不存在】问题的复现和临时解决办法

上午搞的好好的,还添加了数据,下午再测就出现这个问题了,重新编译也不行,真是大白天见*了。。。
百度了一番,发现该问题最早出现是在2021-08-13这样就过分了啊,快三年了还没解决呢?
提示提交的字段["dirty_data"]在数据库中并不存在
然后又找了几个类似的问题贴,看到官方的回复说是一直没办法复现,所以没法解决,好吧,你们真牛
经过几个小时的不断百度和测试,终于发现规律了,复现代码如下

<template>  
	<view class="uni-container">  
		<uni-forms ref="form" v-model="formData" :rules="rules">  
			<uni-forms-item name="goods_name" label="商品名称" label-width="100px" label-align="right" required>  
				<uni-easyinput v-model="formData.goods_name" :clearable="false" placeholder="请输入商品名称" />  
			</uni-forms-item>  
			  
			<uni-forms-item name="is_more_specs" label="是否多规格" label-width="100px" label-align="right">  
				<uni-data-checkbox v-model="formData.is_more_specs" mode="button" :localdata="[{text: '是', value: 1}, {text: '否', value: 0}]"></uni-data-checkbox>  
			</uni-forms-item>  
			  
			<template v-if="formData.is_more_specs">  
				<uni-forms-item name="goods_sku" label="商品sku" label-width="100px" label-align="right">  
					 <uni-easyinput v-model="formData.goods_sku" :clearable="false" placeholder="请输入商品sku" />  
				</uni-forms-item>  
			</template>  
			  
			<template v-else>  
				<uni-forms-item name="remain_stock" label="商品库存" label-width="100px" label-align="right" required>  
					<uni-easyinput v-model="formData.remain_stock" :clearable="false" placeholder="商品库存" />  
				</uni-forms-item>  
			</template>  
			  
			<view class="uni-button-group">  
				<button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">{{$t('common.button.submit')}}</button>  
				<navigator open-type="navigateBack" style="margin-left: 15px;">  
					<button style="width: 100px;" class="uni-button">{{$t('common.button.back')}}</button>  
				</navigator>  
			</view>  
		</uni-forms>  
	</view>  
</template>  
  
<script>  
export default {  
	data() {  
		return {  
			formDataId: '',  
			//表单数据  
			formData: {  
				goods_id: '',  
				goods_name: '',  
				market_price: '',  
				goods_sku: '',  
				is_more_specs: 0  
			},  
			//数据验证  
			rules: {  
				goods_name: {  
					rules: [  
						{  
							"required": true,  
							"errorMessage": '请选择活动商品'  
						}  
					]  
				},  
				remain_stock: {  
					rules: [  
						{  
							"required": true,  
							"errorMessage": '请输入商品库存'  
						}, {  
							format: 'number',  
							errorMessage: '商品库存必须为数字'  
						}  
					]  
				}  
			}  
		}  
	},  
	methods: {  
		submitForm() {  
			this.$refs.form.validate((err, res) => {  
				if (err) return false;  
				  
				//入库  
			});  
		}  
	}  
}  
</script>  
  
<style lang="scss">  
  
</style>


问题的原因就是某个表单项设置了验证规则,但是又因为业务需要增加v-if过滤掉了该表单项,这时候bug的出现了,但实际上这个提示才是最坑的,因为根本没有到去验证数据表那一步啊。

解决办法
如果把v-else节点的template更换成view就没问题了,至于原因我不知道,没心思去分析源码。
希望官方有空把这个烂尾处理了吧。。。

继续阅读 »

上午搞的好好的,还添加了数据,下午再测就出现这个问题了,重新编译也不行,真是大白天见*了。。。
百度了一番,发现该问题最早出现是在2021-08-13这样就过分了啊,快三年了还没解决呢?
提示提交的字段["dirty_data"]在数据库中并不存在
然后又找了几个类似的问题贴,看到官方的回复说是一直没办法复现,所以没法解决,好吧,你们真牛
经过几个小时的不断百度和测试,终于发现规律了,复现代码如下

<template>  
	<view class="uni-container">  
		<uni-forms ref="form" v-model="formData" :rules="rules">  
			<uni-forms-item name="goods_name" label="商品名称" label-width="100px" label-align="right" required>  
				<uni-easyinput v-model="formData.goods_name" :clearable="false" placeholder="请输入商品名称" />  
			</uni-forms-item>  
			  
			<uni-forms-item name="is_more_specs" label="是否多规格" label-width="100px" label-align="right">  
				<uni-data-checkbox v-model="formData.is_more_specs" mode="button" :localdata="[{text: '是', value: 1}, {text: '否', value: 0}]"></uni-data-checkbox>  
			</uni-forms-item>  
			  
			<template v-if="formData.is_more_specs">  
				<uni-forms-item name="goods_sku" label="商品sku" label-width="100px" label-align="right">  
					 <uni-easyinput v-model="formData.goods_sku" :clearable="false" placeholder="请输入商品sku" />  
				</uni-forms-item>  
			</template>  
			  
			<template v-else>  
				<uni-forms-item name="remain_stock" label="商品库存" label-width="100px" label-align="right" required>  
					<uni-easyinput v-model="formData.remain_stock" :clearable="false" placeholder="商品库存" />  
				</uni-forms-item>  
			</template>  
			  
			<view class="uni-button-group">  
				<button style="width: 100px;" type="primary" class="uni-button" @click="submitForm">{{$t('common.button.submit')}}</button>  
				<navigator open-type="navigateBack" style="margin-left: 15px;">  
					<button style="width: 100px;" class="uni-button">{{$t('common.button.back')}}</button>  
				</navigator>  
			</view>  
		</uni-forms>  
	</view>  
</template>  
  
<script>  
export default {  
	data() {  
		return {  
			formDataId: '',  
			//表单数据  
			formData: {  
				goods_id: '',  
				goods_name: '',  
				market_price: '',  
				goods_sku: '',  
				is_more_specs: 0  
			},  
			//数据验证  
			rules: {  
				goods_name: {  
					rules: [  
						{  
							"required": true,  
							"errorMessage": '请选择活动商品'  
						}  
					]  
				},  
				remain_stock: {  
					rules: [  
						{  
							"required": true,  
							"errorMessage": '请输入商品库存'  
						}, {  
							format: 'number',  
							errorMessage: '商品库存必须为数字'  
						}  
					]  
				}  
			}  
		}  
	},  
	methods: {  
		submitForm() {  
			this.$refs.form.validate((err, res) => {  
				if (err) return false;  
				  
				//入库  
			});  
		}  
	}  
}  
</script>  
  
<style lang="scss">  
  
</style>


问题的原因就是某个表单项设置了验证规则,但是又因为业务需要增加v-if过滤掉了该表单项,这时候bug的出现了,但实际上这个提示才是最坑的,因为根本没有到去验证数据表那一步啊。

解决办法
如果把v-else节点的template更换成view就没问题了,至于原因我不知道,没心思去分析源码。
希望官方有空把这个烂尾处理了吧。。。

收起阅读 »

好看的APP下载分发页分享,仿App Store界面,代码简单,易修改,下载即用!

源码分享

好看的APP下载页分享,仿App Store,代码简单,易修改,下载即用!

☞插件市场下载地址

页面展示

☞插件市场下载地址

继续阅读 »

好看的APP下载页分享,仿App Store,代码简单,易修改,下载即用!

☞插件市场下载地址

页面展示

☞插件市场下载地址

收起阅读 »

playbackRate倍速播放真机无效啊?请问有解决的人吗?

bug提交

playbackRate倍速播放真机无效啊?请问有解决的人吗?

playbackRate倍速播放真机无效啊?请问有解决的人吗?

用惯了uniapp我又用wap2app接到一个外包项目,现在已成功上线,分享一下踩过的坑!

外包 uniapp wap2app

最近合作了一个客户,需求是把现成的这种网站包装成App,在各大应用商店也能下载,做用户留存。

需求不复杂,现在已经完工了,客户指明要使用wap2app这种技术,本来之前一直是用uniapp开发app的,一下子调整到wap2app还不适应。

别无他法,唯有熟读文档,文档东西不多,wap2app包装起来非常简单,但是有一些东西文档并没有,分享一下往后来人避之!

1. 增加底部原生选项卡,屏蔽h5选项卡,底部选项卡怎么设置都不对?
解答:底部选项卡每个选项都要单独匹配matchUrls

2. android和ios顶部状态栏时有时无?
解答:manifest.json文件中对statusbar单独设置

"plus" : {  
        "statusbar" : {  
            "style" : "dark",  
            "background" : "#F7F7F7",  
            "immersed" : "supportedDevice"  
        }  
}

3. 隐藏H5右侧滚动条
解答:页面js中设置代码

function init() {  
	const ws = plus.webview.currentWebview()  
	ws.setStyle({scrollIndicator:'none'})  
}  
  
init()

4. 没办法分享朋友圈?
解答:不要用plus中sendWithSystem的api,用这里的方案:原生分享 - wap2app教程

5. ios底部选项卡和手机dock重叠?
解答:cliend_index.html中调整高度

.tab {  
  height: 66px;  
}  
.tab-item {    
  color: #444444;//选项卡文字默认   
  height: 66px;  
  padding-bottom: 16px;  
} 

6. 头部导航栏需要换成图片logo?
解答:借助plus功能,绘制图片,https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

function init() {  
  document.querySelectorAll('.kfwrapbox')[1].style.display = 'none'  
  const ws = plus.webview.currentWebview()  
  const nView = ws.getTitleNView()  
  nView.drawBitmap('/icons/logo.png',{},{left: '35%', top: '10px', width: '98px', height: '30px'})  
  ws.setStyle({scrollIndicator:'none'})  
}  
  
init()

7. ios打包后提示Prompt:Unable to connect to server. please check network settings
解答:这个是最难搞的问题,ios未授权网络访问前app是没网的,方法是监听网络状态变化,授权网络访问后重启应用

8. ios打包后进入app白屏?
解答:使用IOS UIWebview

事后处于好奇我又分析了一下这个项目的商业模式发现还挺好的,看前台数据基本上已经实现盈利了。它的市场定位是县城级,我们都知道做比较大的生活平台是谁,58同城嘛!但是县城这种他覆盖有限。

目标用户呢就是县城内的居民、商户、企业。

平台能提供需信息发布,像劳动力、服务、商品等、还有信息匹配与推荐、交易撮合与支付,根据县城的特点,平台可以提供一些本地化的服务,如农产品直销、家政服务预约、二手物品交易等。

盈利模式主要是广告收入:首页位置展示广告、发布消息置顶向广告主收取费用。

因为第一次合作,客户担心风险并且需要开发票,走的是https://www.duiyou360.com/service?keyword=%E5%89%8D%E7%AB%AFJason&from=Search,现在已经结清了项目款。

真心佩服这些有头脑的老板,脑子是真好使!

最后说一句,uniapp、wap2app真的是良心出品,快速做项目还得看它。

继续阅读 »

最近合作了一个客户,需求是把现成的这种网站包装成App,在各大应用商店也能下载,做用户留存。

需求不复杂,现在已经完工了,客户指明要使用wap2app这种技术,本来之前一直是用uniapp开发app的,一下子调整到wap2app还不适应。

别无他法,唯有熟读文档,文档东西不多,wap2app包装起来非常简单,但是有一些东西文档并没有,分享一下往后来人避之!

1. 增加底部原生选项卡,屏蔽h5选项卡,底部选项卡怎么设置都不对?
解答:底部选项卡每个选项都要单独匹配matchUrls

2. android和ios顶部状态栏时有时无?
解答:manifest.json文件中对statusbar单独设置

"plus" : {  
        "statusbar" : {  
            "style" : "dark",  
            "background" : "#F7F7F7",  
            "immersed" : "supportedDevice"  
        }  
}

3. 隐藏H5右侧滚动条
解答:页面js中设置代码

function init() {  
	const ws = plus.webview.currentWebview()  
	ws.setStyle({scrollIndicator:'none'})  
}  
  
init()

4. 没办法分享朋友圈?
解答:不要用plus中sendWithSystem的api,用这里的方案:原生分享 - wap2app教程

5. ios底部选项卡和手机dock重叠?
解答:cliend_index.html中调整高度

.tab {  
  height: 66px;  
}  
.tab-item {    
  color: #444444;//选项卡文字默认   
  height: 66px;  
  padding-bottom: 16px;  
} 

6. 头部导航栏需要换成图片logo?
解答:借助plus功能,绘制图片,https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View

function init() {  
  document.querySelectorAll('.kfwrapbox')[1].style.display = 'none'  
  const ws = plus.webview.currentWebview()  
  const nView = ws.getTitleNView()  
  nView.drawBitmap('/icons/logo.png',{},{left: '35%', top: '10px', width: '98px', height: '30px'})  
  ws.setStyle({scrollIndicator:'none'})  
}  
  
init()

7. ios打包后提示Prompt:Unable to connect to server. please check network settings
解答:这个是最难搞的问题,ios未授权网络访问前app是没网的,方法是监听网络状态变化,授权网络访问后重启应用

8. ios打包后进入app白屏?
解答:使用IOS UIWebview

事后处于好奇我又分析了一下这个项目的商业模式发现还挺好的,看前台数据基本上已经实现盈利了。它的市场定位是县城级,我们都知道做比较大的生活平台是谁,58同城嘛!但是县城这种他覆盖有限。

目标用户呢就是县城内的居民、商户、企业。

平台能提供需信息发布,像劳动力、服务、商品等、还有信息匹配与推荐、交易撮合与支付,根据县城的特点,平台可以提供一些本地化的服务,如农产品直销、家政服务预约、二手物品交易等。

盈利模式主要是广告收入:首页位置展示广告、发布消息置顶向广告主收取费用。

因为第一次合作,客户担心风险并且需要开发票,走的是https://www.duiyou360.com/service?keyword=%E5%89%8D%E7%AB%AFJason&from=Search,现在已经结清了项目款。

真心佩服这些有头脑的老板,脑子是真好使!

最后说一句,uniapp、wap2app真的是良心出品,快速做项目还得看它。

收起阅读 »