HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

SQLite云端打包配置说明

SQLite

HBuilderX 1.7.2及以上版本支持SQLite操作db文件。

概述

SQLite是一种嵌入式数据库,本质上就是一个数据库文件(.db)。是无服务器的、零配置的、事务性的简单轻量级SQL数据库引擎。
通常在移动设备上适合不需要高并发量的本地数据存储。

SQLite API使用

plus.sqlite已经封装好操作db数据库文件接口,按以下方法调用即可。
在uni-app中可使用条件编译直接调用5+ Push接口

打开数据库

使用前需调用plus.sqlite.openDatabase打开数据库,必须指定数据库文件路径(.db)和数据库名称。
数据库文件路径使用需注意以下问题:

应用资源目录中的文件只可读,在使用相对路径(如"./x.db")或5+API路径RelativeURL的应用资源目录(如"_www/x.db")时不能写入保存数据。通常可以将一些应用的初始数据作为资源内置到应用中,在业务逻辑中进行读取操作。
如果需要在应用的业务逻辑产生的数据保存,应该将数据库文件保存在可写目录中,推荐使用5+API路径的应用私有文档目录(如"_doc/x.db"),此目录中的文件是可读可写,并且应用热更新时不会影响此目录中的文件。
数据库文件路径只可读时,如果文件不存在打开数据库则会失败;数据库文件路径可读可写时,如果文件不存在则自动创建数据库文件。

注意:Android平台目前已知数据库文件不存在时不会自动创建(此问题会在HBuilderX1.8.1版本修复),临时解决方法是先创建不存在的文件,示例如下:

document.addEventListener('plusready', function(e){  
    // 确保_doc/test.db文件存在  
    plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function(fs){  
        fs.root.getFile('test.db', {create:true}, function(fileEntry){  
            console.log('ensure test.db file!');  
        });  
    });  
}, false);  

// 打开数据库  
function openDB(){  
    outSet('打开数据库: ');  
    plus.sqlite.openDatabase({  
        name: 'first',  
        path: '_doc/test.db',  
        success: function(e){  
            console.log(JSON.stringify(e));  
        },  
        fail: function(e){  
            console.log(JSON.stringify(e));  
        }  
    });  
}

操作数据库

  • 执行SQL语句(plus.sqlite.executeSql),对数据进行增、删、改操作。数据库文件路径必须可读可写,否则会操作失败。
  • 执行事务(plus.sqlite.transaction),对数据库执行事务操作。数据库文件路径必须可读可写,否则会操作失败。
  • 执行查询SQL语句(plus.sqlite.selectSql),对数据库执行查询操作。数据库文件路径可读即可。

关闭数据库

数据库操作完成后,必须调用plus.sqlite.closeDatabase关闭,否则一直占用系统资源。推荐操作前打开数据库,完成操作后及时关闭数据库,避免引起占用系统资源而无法执行其它操作。

完整5+ API接口参考SQLite规范文档

云端打包配置

使用SQLite功能,提交云端打包时需在manifest.json中配置使用“SQLite(数据库)”。

  • HBuilderX1.8.0及以后版本通过可视化界面配置
    打开应用的manifest.json文件,选择“模块权限配置”项,勾选“SQLite数据库”,如下图所示:
    配置SQLite

  • HBuilderX1.7.2&1.7.3版本通过源码视图配置
    打开应用manifest.json文件,点击“源码视图”,在"permissions"节点下添加"SQLite"节点:

    //...  
    "permissions" : {  
        //...  
        "SQLite" : {}  
    },  
    //...

    uni-app应用在"app-plus"->"modules"节点下添加"SQLite"数据

继续阅读 »

HBuilderX 1.7.2及以上版本支持SQLite操作db文件。

概述

SQLite是一种嵌入式数据库,本质上就是一个数据库文件(.db)。是无服务器的、零配置的、事务性的简单轻量级SQL数据库引擎。
通常在移动设备上适合不需要高并发量的本地数据存储。

SQLite API使用

plus.sqlite已经封装好操作db数据库文件接口,按以下方法调用即可。
在uni-app中可使用条件编译直接调用5+ Push接口

打开数据库

使用前需调用plus.sqlite.openDatabase打开数据库,必须指定数据库文件路径(.db)和数据库名称。
数据库文件路径使用需注意以下问题:

应用资源目录中的文件只可读,在使用相对路径(如"./x.db")或5+API路径RelativeURL的应用资源目录(如"_www/x.db")时不能写入保存数据。通常可以将一些应用的初始数据作为资源内置到应用中,在业务逻辑中进行读取操作。
如果需要在应用的业务逻辑产生的数据保存,应该将数据库文件保存在可写目录中,推荐使用5+API路径的应用私有文档目录(如"_doc/x.db"),此目录中的文件是可读可写,并且应用热更新时不会影响此目录中的文件。
数据库文件路径只可读时,如果文件不存在打开数据库则会失败;数据库文件路径可读可写时,如果文件不存在则自动创建数据库文件。

注意:Android平台目前已知数据库文件不存在时不会自动创建(此问题会在HBuilderX1.8.1版本修复),临时解决方法是先创建不存在的文件,示例如下:

document.addEventListener('plusready', function(e){  
    // 确保_doc/test.db文件存在  
    plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function(fs){  
        fs.root.getFile('test.db', {create:true}, function(fileEntry){  
            console.log('ensure test.db file!');  
        });  
    });  
}, false);  

// 打开数据库  
function openDB(){  
    outSet('打开数据库: ');  
    plus.sqlite.openDatabase({  
        name: 'first',  
        path: '_doc/test.db',  
        success: function(e){  
            console.log(JSON.stringify(e));  
        },  
        fail: function(e){  
            console.log(JSON.stringify(e));  
        }  
    });  
}

操作数据库

  • 执行SQL语句(plus.sqlite.executeSql),对数据进行增、删、改操作。数据库文件路径必须可读可写,否则会操作失败。
  • 执行事务(plus.sqlite.transaction),对数据库执行事务操作。数据库文件路径必须可读可写,否则会操作失败。
  • 执行查询SQL语句(plus.sqlite.selectSql),对数据库执行查询操作。数据库文件路径可读即可。

关闭数据库

数据库操作完成后,必须调用plus.sqlite.closeDatabase关闭,否则一直占用系统资源。推荐操作前打开数据库,完成操作后及时关闭数据库,避免引起占用系统资源而无法执行其它操作。

完整5+ API接口参考SQLite规范文档

云端打包配置

使用SQLite功能,提交云端打包时需在manifest.json中配置使用“SQLite(数据库)”。

  • HBuilderX1.8.0及以后版本通过可视化界面配置
    打开应用的manifest.json文件,选择“模块权限配置”项,勾选“SQLite数据库”,如下图所示:
    配置SQLite

  • HBuilderX1.7.2&1.7.3版本通过源码视图配置
    打开应用manifest.json文件,点击“源码视图”,在"permissions"节点下添加"SQLite"节点:

    //...  
    "permissions" : {  
        //...  
        "SQLite" : {}  
    },  
    //...

    uni-app应用在"app-plus"->"modules"节点下添加"SQLite"数据

收起阅读 »

感谢hbuilder,美文苑文学第一个app终于出来了!

分享

首先感谢hbuilder,美文苑文学第一个app完善版本终于出来了!用uniapp做的!
这uniapp确实好用!多看看手册确实容易上手!会网站制作的上手都相对容易的!
本站下载地址:https://www.meiweny.cn/app/1.2.8.apk 安卓版

继续阅读 »

首先感谢hbuilder,美文苑文学第一个app完善版本终于出来了!用uniapp做的!
这uniapp确实好用!多看看手册确实容易上手!会网站制作的上手都相对容易的!
本站下载地址:https://www.meiweny.cn/app/1.2.8.apk 安卓版

收起阅读 »

判断iOS系统推送功能是否开启,并可提醒去设置页打开设置推送

判断iOS系统推送功能是否开启

如果需要判断ios系统推送功能是否开启,并提醒去设置页打开设置推送,可以用以下nativeJS 代码:

function isOpenPush() {  
                var UIApplication = plus.ios.import("UIApplication");  
                var app = UIApplication.sharedApplication();  
                var enabledTypes = 0;  
                if (app.currentUserNotificationSettings) {  
                    var settings = app.currentUserNotificationSettings();  
                    enabledTypes = settings.plusGetAttribute("types");  
                    console.log("enabledTypes1:" + enabledTypes);  
                    if (enabledTypes == 0) {  
                        plus.nativeUI.confirm("推送设置没有开启,是否去开启?", function(e) {  
                            if (e.index == 0) {  
                                var NSURL2 = plus.ios.import("NSURL");  
                                var setting2 = NSURL2.URLWithString("app-settings:");  
                                var application2 = UIApplication.sharedApplication();  
                                application2.openURL(setting2);  
                                plus.ios.deleteObject(setting2);  
                                plus.ios.deleteObject(NSURL2);  
                                plus.ios.deleteObject(application2);  
                            }  
                        }, {  
                            "buttons": ["Yes", "No"],  
                            "verticalAlign": "center"  
                        });  
                    }  
                    plus.ios.deleteObject(settings);  
                } else {  
                    enabledTypes = app.enabledRemoteNotificationTypes();  
                    if(enabledTypes == 0){  
                        console.log("推送未开启!");  
                    }else{  
                        console.log("已经开启推送功能!")  
                    }  
                    console.log("enabledTypes2:" + enabledTypes);  
                }  
                plus.ios.deleteObject(app);  
            }

此功能在uniapp项目且配置为自定义模式的时候,会报:“plus.ios.import is not a function”错误。
该问题已经在HBuilderX1.9.4.20190426 之后版本已经解决

继续阅读 »

如果需要判断ios系统推送功能是否开启,并提醒去设置页打开设置推送,可以用以下nativeJS 代码:

function isOpenPush() {  
                var UIApplication = plus.ios.import("UIApplication");  
                var app = UIApplication.sharedApplication();  
                var enabledTypes = 0;  
                if (app.currentUserNotificationSettings) {  
                    var settings = app.currentUserNotificationSettings();  
                    enabledTypes = settings.plusGetAttribute("types");  
                    console.log("enabledTypes1:" + enabledTypes);  
                    if (enabledTypes == 0) {  
                        plus.nativeUI.confirm("推送设置没有开启,是否去开启?", function(e) {  
                            if (e.index == 0) {  
                                var NSURL2 = plus.ios.import("NSURL");  
                                var setting2 = NSURL2.URLWithString("app-settings:");  
                                var application2 = UIApplication.sharedApplication();  
                                application2.openURL(setting2);  
                                plus.ios.deleteObject(setting2);  
                                plus.ios.deleteObject(NSURL2);  
                                plus.ios.deleteObject(application2);  
                            }  
                        }, {  
                            "buttons": ["Yes", "No"],  
                            "verticalAlign": "center"  
                        });  
                    }  
                    plus.ios.deleteObject(settings);  
                } else {  
                    enabledTypes = app.enabledRemoteNotificationTypes();  
                    if(enabledTypes == 0){  
                        console.log("推送未开启!");  
                    }else{  
                        console.log("已经开启推送功能!")  
                    }  
                    console.log("enabledTypes2:" + enabledTypes);  
                }  
                plus.ios.deleteObject(app);  
            }

此功能在uniapp项目且配置为自定义模式的时候,会报:“plus.ios.import is not a function”错误。
该问题已经在HBuilderX1.9.4.20190426 之后版本已经解决

收起阅读 »

在 uni-app 中使用 uni-push

Push uniapp

> 文档已迁移至新链接:https://uniapp.dcloud.net.cn/uni-push/v1/how-to-use-in-uniapp.html
> 如有疑问,可以单独发贴咨询。

继续阅读 »

> 文档已迁移至新链接:https://uniapp.dcloud.net.cn/uni-push/v1/how-to-use-in-uniapp.html
> 如有疑问,可以单独发贴咨询。

收起阅读 »

关于HbuderX配置外部web服务器问题,我看到还有很多不会,我分享一下怎么弄

web服务器

1,首先你需要知道自己的ip地址,运行cmd ipconfig

2,打开工具看图片运行到外部浏览器


查看浏览器的地址,记住这个端口号

3,打开配置服务器


找到这一块

4,把你们本机的ip地址填写进去还有端口号看图

5,完美运行,如果手机wifi跟电脑在同一个网关上,可以实现扫码直接预览

继续阅读 »

1,首先你需要知道自己的ip地址,运行cmd ipconfig

2,打开工具看图片运行到外部浏览器


查看浏览器的地址,记住这个端口号

3,打开配置服务器


找到这一块

4,把你们本机的ip地址填写进去还有端口号看图

5,完美运行,如果手机wifi跟电脑在同一个网关上,可以实现扫码直接预览

收起阅读 »

plus removeRecursively 删除指定目录下的所有文件(有可能包含目录?)

h5+ plus

直接上代码:

var dirPath = '_doc/tempImage/';  
plus.io.resolveLocalFileSystemURL(dirPath, function(entry) {    
    //读取这个目录对象    
    var directoryReader = entry.createReader();    
    // console.log(dirPath)    
    //读取这个目录下的所有文件    
    directoryReader.readEntries(function(entries) {    
        // console.log(entries.length)    
        //如果有才操作    
        if (entries.length > 0) {    
            //删除目录将会删除其下的所有文件及子目录 不能删除根目录,如果操作删除根目录  
            //将会删除目录下的文件及子目录,不会删除根目录自身。 删除目录成功通过succesCB  
            //回调返回,失败则通过errorCB返回。  
            entry.removeRecursively(function(entry) {    
                // console.log('删除成功回调')    
                //删除成功回调    
            }, function(e) {    
                // console.log('!!')    
                //错误信息    
                $.toast(e.message + ' ?!');    
            })    
        }    
    }, function(e) {    
        $.toast('读取文件失败:' + e.message)    
    })    
}, function(e) {    
    $.toast('读取目录失败:' + e.message)    
})  

以前 readEntries 成功回调的返回参数对象也有 removeRecursively 方法来着,现在没有了,郁闷,害得我找了半天毛病,手册上还是错误的,给我整得蒙蔽的。
注意上面的两个回调对象变量名称是不一样的。

继续阅读 »

直接上代码:

var dirPath = '_doc/tempImage/';  
plus.io.resolveLocalFileSystemURL(dirPath, function(entry) {    
    //读取这个目录对象    
    var directoryReader = entry.createReader();    
    // console.log(dirPath)    
    //读取这个目录下的所有文件    
    directoryReader.readEntries(function(entries) {    
        // console.log(entries.length)    
        //如果有才操作    
        if (entries.length > 0) {    
            //删除目录将会删除其下的所有文件及子目录 不能删除根目录,如果操作删除根目录  
            //将会删除目录下的文件及子目录,不会删除根目录自身。 删除目录成功通过succesCB  
            //回调返回,失败则通过errorCB返回。  
            entry.removeRecursively(function(entry) {    
                // console.log('删除成功回调')    
                //删除成功回调    
            }, function(e) {    
                // console.log('!!')    
                //错误信息    
                $.toast(e.message + ' ?!');    
            })    
        }    
    }, function(e) {    
        $.toast('读取文件失败:' + e.message)    
    })    
}, function(e) {    
    $.toast('读取目录失败:' + e.message)    
})  

以前 readEntries 成功回调的返回参数对象也有 removeRecursively 方法来着,现在没有了,郁闷,害得我找了半天毛病,手册上还是错误的,给我整得蒙蔽的。
注意上面的两个回调对象变量名称是不一样的。

收起阅读 »

对于uniapp瀑布流怎么做,几行代码教你

uniapp

对于新鲜的uniapp别人问我瀑布流怎么做,现在我几行代码教你,本人就根据官网的看图demo来弄吧。思路就是把图标以纵向左右分开,设置宽度各自占一半,然后就是图片宽度一定(占一半),高度根据图片自己高度设置,假如高度太高了,可以自行限制一半自由发挥,看不到明显效果的话,就是图片高度都是等高的

<template>  
    <view class="index">  
        <view class="left">  
            <block v-for="(item, index) in list" :key="index" class="itemlist">  
                <view class="card" @click="goDetail(item)" v-if="index%2==0">  
                    <image class="card-img" :src="item.img_src" mode="widthFix"></image>  
                    <text class="card-num-view">{{item.img_num}}P</text>  
                    <view class="card-bottm row">  
                        <view class="car-title-view row">  
                            <text class="card-title">{{item.title}}</text>  
                        </view>  
                        <view @click.stop="share(item)" class="card-share-view"></view>  
                    </view>  
                </view>  
            </block>  
        </view>  

        <view class="right">  
            <block v-for="(item, index) in list" :key="index" class="itemlist">  
                <view class="card" @click="goDetail(item)" v-if="index%2==1">  
                    <image class="card-img" :src="item.img_src" mode="widthFix"></image>  
                    <text class="card-num-view">{{item.img_num}}P</text>  
                    <view class="card-bottm row">  
                        <view class="car-title-view row">  
                            <text class="card-title">{{item.title}}</text>  
                        </view>  
                        <view @click.stop="share(item)" class="card-share-view"></view>  
                    </view>  
                </view>  
            </block>  
        </view>  
    </view>  
</template>  
.left,.right{  
  display: inline-block;  
  vertical-align: top;  
  width: 49%;  
}  

.itemlist{  
      background-color: #fff;  
      margin: 1%;   
      margin-bottom: 20rpx;  
      display: inline-block;  

    }  
继续阅读 »

对于新鲜的uniapp别人问我瀑布流怎么做,现在我几行代码教你,本人就根据官网的看图demo来弄吧。思路就是把图标以纵向左右分开,设置宽度各自占一半,然后就是图片宽度一定(占一半),高度根据图片自己高度设置,假如高度太高了,可以自行限制一半自由发挥,看不到明显效果的话,就是图片高度都是等高的

<template>  
    <view class="index">  
        <view class="left">  
            <block v-for="(item, index) in list" :key="index" class="itemlist">  
                <view class="card" @click="goDetail(item)" v-if="index%2==0">  
                    <image class="card-img" :src="item.img_src" mode="widthFix"></image>  
                    <text class="card-num-view">{{item.img_num}}P</text>  
                    <view class="card-bottm row">  
                        <view class="car-title-view row">  
                            <text class="card-title">{{item.title}}</text>  
                        </view>  
                        <view @click.stop="share(item)" class="card-share-view"></view>  
                    </view>  
                </view>  
            </block>  
        </view>  

        <view class="right">  
            <block v-for="(item, index) in list" :key="index" class="itemlist">  
                <view class="card" @click="goDetail(item)" v-if="index%2==1">  
                    <image class="card-img" :src="item.img_src" mode="widthFix"></image>  
                    <text class="card-num-view">{{item.img_num}}P</text>  
                    <view class="card-bottm row">  
                        <view class="car-title-view row">  
                            <text class="card-title">{{item.title}}</text>  
                        </view>  
                        <view @click.stop="share(item)" class="card-share-view"></view>  
                    </view>  
                </view>  
            </block>  
        </view>  
    </view>  
</template>  
.left,.right{  
  display: inline-block;  
  vertical-align: top;  
  width: 49%;  
}  

.itemlist{  
      background-color: #fff;  
      margin: 1%;   
      margin-bottom: 20rpx;  
      display: inline-block;  

    }  
收起阅读 »

有偿提供佳博蓝牙打印机服务

一个打印小票的功能,做了快一个月,又是要文档,又是求助别人,终于弄好了。所以有相似功能还没搞定的同学,可以试试联系我。如果你已经完成了蓝牙发现并且能连接上打印机,只是最后的outputstream.write没有反应,在确认的我方法可以正常打印的情况下 收费是200,如果从蓝牙发现开始,收费500,但是要提供给我打印机的技术文档。另外说一句,如果最后一步outputstream.write这个没反应,最有可能的原因是你的打印机是双模式的,即票据模式和标签模式,而打印机默认是标签模式的。所以导致无法打印。但是我按照文档切换的时候是无效的,所以我就干脆用的标签模式打印,但是标签模式的打印高度是固定的,最后我采取了分段打印的方法,有能力的可以参考,实在不行的可以联系我。暂时只支持安卓时间,苹果没有研究。

继续阅读 »

一个打印小票的功能,做了快一个月,又是要文档,又是求助别人,终于弄好了。所以有相似功能还没搞定的同学,可以试试联系我。如果你已经完成了蓝牙发现并且能连接上打印机,只是最后的outputstream.write没有反应,在确认的我方法可以正常打印的情况下 收费是200,如果从蓝牙发现开始,收费500,但是要提供给我打印机的技术文档。另外说一句,如果最后一步outputstream.write这个没反应,最有可能的原因是你的打印机是双模式的,即票据模式和标签模式,而打印机默认是标签模式的。所以导致无法打印。但是我按照文档切换的时候是无效的,所以我就干脆用的标签模式打印,但是标签模式的打印高度是固定的,最后我采取了分段打印的方法,有能力的可以参考,实在不行的可以联系我。暂时只支持安卓时间,苹果没有研究。

收起阅读 »

MUI input mui-input-password 和 Vue 共同使用失效的问题

Vue mui

<input v-model="password" type="password" class="mui-input-password mui-input" placeholder="设置6位数字密码">
和Vue共用,那个小眼睛失效。无论怎么动态初始化都不好使!

解决办法:

1、在Vue中自定义组件:
Vue.component('p-input', {
mounted:function() {
mui('.mui-input-row input').input();
},
props: ['value', 'placeholder'],
template:
'<input type="password" class="mui-input mui-input-password" :placeholder=placeholder '+
' v-bind:value="value" '+
' v-on:input="$emit(\'input\', $event.target.value)" '+
'>'
})

2、html中这么用:
<p-input v-model="password" placeholder="设置6位数字密码"></p-input>

继续阅读 »

<input v-model="password" type="password" class="mui-input-password mui-input" placeholder="设置6位数字密码">
和Vue共用,那个小眼睛失效。无论怎么动态初始化都不好使!

解决办法:

1、在Vue中自定义组件:
Vue.component('p-input', {
mounted:function() {
mui('.mui-input-row input').input();
},
props: ['value', 'placeholder'],
template:
'<input type="password" class="mui-input mui-input-password" :placeholder=placeholder '+
' v-bind:value="value" '+
' v-on:input="$emit(\'input\', $event.target.value)" '+
'>'
})

2、html中这么用:
<p-input v-model="password" placeholder="设置6位数字密码"></p-input>

收起阅读 »

开发电商app的优势

移动APP

> 更好提升品牌价值

企业在开发APP时,可根据企业品牌特性,通过增加一些新奇趣的营销互动体验模式,提升消费者的App使用感受。同时,借助高质量的内容、视频、秒杀、积分兑换等营销模式,融入于电商软件中,能更好地拉近用户与品牌距离,同时提高产品销量,提升品牌高度。目前,力谱云支持:秒杀、满减、会员积分、分红返利、预付卡、代金券等数十余种营销功能,供企业加速流量变现之路。

继续阅读 »

> 更好提升品牌价值

企业在开发APP时,可根据企业品牌特性,通过增加一些新奇趣的营销互动体验模式,提升消费者的App使用感受。同时,借助高质量的内容、视频、秒杀、积分兑换等营销模式,融入于电商软件中,能更好地拉近用户与品牌距离,同时提高产品销量,提升品牌高度。目前,力谱云支持:秒杀、满减、会员积分、分红返利、预付卡、代金券等数十余种营销功能,供企业加速流量变现之路。

收起阅读 »

开发电商app的优势,力谱云助您开发电商app

移动APP

随着电商企业的蓬勃发展,开发一款专属电商App成为了许多企业进军移动蓝海市场的不二选择。企业通过开发APP可以更有利的发展,那么开发电商App究竟有何优势呢?跟着力谱云,来了解一番吧!

> 用户体验更佳

优化用户体验,一直是企业在开发电商App中,最为看重的一个关键环节。通过AR、VR、AI等黑科技的融合运用,能为用户带来意想不到的惊喜体验, 提升用户粘性。力谱云APP开发平台,目前支持运用直播、大数据等科技技术为移动电商解决方案添砖加瓦。

继续阅读 »

随着电商企业的蓬勃发展,开发一款专属电商App成为了许多企业进军移动蓝海市场的不二选择。企业通过开发APP可以更有利的发展,那么开发电商App究竟有何优势呢?跟着力谱云,来了解一番吧!

> 用户体验更佳

优化用户体验,一直是企业在开发电商App中,最为看重的一个关键环节。通过AR、VR、AI等黑科技的融合运用,能为用户带来意想不到的惊喜体验, 提升用户粘性。力谱云APP开发平台,目前支持运用直播、大数据等科技技术为移动电商解决方案添砖加瓦。

收起阅读 »

uni 文本框循环取值

input

//按钮方法
formSubmit: function(e, key) {
var keys = key * 3;//key是定位所在位置,比如遍历出来的第一行是0,第二行是1,我这边乘以3是因为我一行有3个文本框。
var inpArr = document.getElementsByTagName("input");//定位页面input ,所以这里如果页面有其他不是文本框的input 那要注意了。。。
const vip = inpArr[keys + 2].value;
const svip = inpArr[keys + 1].value;
const ssvip = inpArr[keys].value;
}

//页面代码
<view class="uni-card" v-for="(value, key) in list2" :key="key">
<view class="uni-flex uni-row am-margin-bottom-sm product-list-name">
<view style="flex: 1; line-height: 38upx;">{{ value.proName }}&nbsp;【{{value.proSize}}】</view>
<view class="am-text-right" style="width: 140upx;">
<uni-badge text="待调价" type="danger"></uni-badge>
</view>
</view>
<view class="uni-flex uni-row product-list-right">
<view class="product-list-small">成本价</view>
<view class="product-list-small">SVIP价</view>
<view class="product-list-small">VIP价</view>
<view class="product-list-small">会员价</view>
</view>
<view class="uni-flex uni-row product-list-right">
<view class="product-list-money" style="border: 2upx solid #f1f1f1; font-size: 32upx; color: #FF5101; line-height: 70upx; font-weight: bold;">{{ value.proCbj }}</view>
<view class="product-list-money">
<input type="number" :value="value.proSSVip" name='ssvip1' />
</view>
<view class="product-list-money">
<input type="number" :value="value.proSVip" name='svip1' />
</view>
<view class="product-list-money">
<input type="number" :value="value.proVip" name='vip1' />
</view>
</view>
<view class="product-list-foot-font">
<text class="iconfont icon-yangshengqi" style="font-size: 20upx; color: #aaa; margin-right: 4upx;"></text>
<text style="color: #999; font-size: 26upx;">19-01-12</text>从<text>15.50</text>调为<text>{{ value.money }}</text>,差额<text>{{ value.rate }}</text>
</view>
<view class="am-text-center finance-list-btn">
<button type="warn" @tap="formSubmit(value.proID,key)">确认调价</button>
</view>
</view>

继续阅读 »

//按钮方法
formSubmit: function(e, key) {
var keys = key * 3;//key是定位所在位置,比如遍历出来的第一行是0,第二行是1,我这边乘以3是因为我一行有3个文本框。
var inpArr = document.getElementsByTagName("input");//定位页面input ,所以这里如果页面有其他不是文本框的input 那要注意了。。。
const vip = inpArr[keys + 2].value;
const svip = inpArr[keys + 1].value;
const ssvip = inpArr[keys].value;
}

//页面代码
<view class="uni-card" v-for="(value, key) in list2" :key="key">
<view class="uni-flex uni-row am-margin-bottom-sm product-list-name">
<view style="flex: 1; line-height: 38upx;">{{ value.proName }}&nbsp;【{{value.proSize}}】</view>
<view class="am-text-right" style="width: 140upx;">
<uni-badge text="待调价" type="danger"></uni-badge>
</view>
</view>
<view class="uni-flex uni-row product-list-right">
<view class="product-list-small">成本价</view>
<view class="product-list-small">SVIP价</view>
<view class="product-list-small">VIP价</view>
<view class="product-list-small">会员价</view>
</view>
<view class="uni-flex uni-row product-list-right">
<view class="product-list-money" style="border: 2upx solid #f1f1f1; font-size: 32upx; color: #FF5101; line-height: 70upx; font-weight: bold;">{{ value.proCbj }}</view>
<view class="product-list-money">
<input type="number" :value="value.proSSVip" name='ssvip1' />
</view>
<view class="product-list-money">
<input type="number" :value="value.proSVip" name='svip1' />
</view>
<view class="product-list-money">
<input type="number" :value="value.proVip" name='vip1' />
</view>
</view>
<view class="product-list-foot-font">
<text class="iconfont icon-yangshengqi" style="font-size: 20upx; color: #aaa; margin-right: 4upx;"></text>
<text style="color: #999; font-size: 26upx;">19-01-12</text>从<text>15.50</text>调为<text>{{ value.money }}</text>,差额<text>{{ value.rate }}</text>
</view>
<view class="am-text-center finance-list-btn">
<button type="warn" @tap="formSubmit(value.proID,key)">确认调价</button>
</view>
</view>

收起阅读 »