android程序员 之 小程序开发总结
newspring 主题
文章目录
- android 程序员开发支付宝小程序
- 本人前置知识:
- 遇到的问题
- 如何让小程序控件显隐?
- 如何让两个view 进行叠加.
- js中判断对象是否为空
- 如何让控件view 悬浮
- 一个元素同时使用多个类选择器
- js 交换位置
- 自定义组件的数值传递. 如果组件内属性变化如何更新数据
- 为什么遮罩使用mask 背景透明,里面内容不透明
- 小程序如何传递参数.
- 小程序正则校验
- 如何查看调试信息
android 程序员开发支付宝小程序
前段时间公司有一个大屏项目需要用支付宝小程序开发. 在开发的过程中遇到各种问题,在此记录用来以后查看. (PS : 这篇复盘文章早就该写了. 一直拖着没写…)
本人前置知识:
- android开发相关知识
- react 相关知识(react 和小程序很类似 包括文件目录结构 导入导出组件等等,所以写小程序比较好上手)
- ES6 相关
- flex布局(非常重要)
遇到的问题
其实遇到的很多问题都是样式 CSS的问题, 这块知识是android开发程序员的盲区, 每次都需要去查询. 还有一些可能是web前端要掌握的知识,但是对于android开发来说是比较陌生的. 在此记录.
如何让小程序控件显隐?
在 js 内 data:{} 里面 创建一个布尔类型的属性 通过a:if 这个属性判断.
Page({
data:{
showView:true
},
//上面的是js 代码
//下面是xml代码
<view a:if="{{showView}}">
<text >显示或者隐藏数据/L</text>
</view>
如何让两个view 进行叠加.
可以使用z-index. z-index 使用方法
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
Z-index 仅能在定位元素上奏效（例如 position:absolute;)
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:2
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="https://www.w3school.com.cn/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index 1 拥有更高的优先级。</p>
</body>
</html>
js中判断对象是否为空
1.es6中可以使用Object.keys(obj)
var data = {};
var arr = Object.keys(data);
alert(arr.length == 0); //true 为空， false 不为空
2.将json对象转化为json字符串，再判断该字符串是否为"{}"
var data = {};
var b = (JSON.stringify(data) == "{}");
alert(b); //true 为空， false 不为空
如何让控件view 悬浮
使用float属性
一个元素同时使用多个类选择器
https://www.cnblogs.com/guxin/p/css-multi-class-selector.html
js 交换位置
let temp = details[0];
details[0] = item;
details[details.length - 1] = temp;
自定义组件的数值传递. 如果组件内属性变化如何更新数据
传个方法进去回调https://www.love85g.com/?p=1975 . 回调方法一定以on开头要不会认为你是字符串
为什么遮罩使用mask 背景透明,里面内容不透明
1、错误的写法
.mask {
background: black;
opacity: 0.5;
}
2、正确的写法
.mask {
background: rgba(0, 0, 0, 0.5);
}
小程序如何传递参数.
小程序多个参数传递. 和URL get请求参数传递类似…
小程序正则校验
验证数字的正则表达式集
验证数字：^[0-9]*$
验证n位的数字：^\d{n}$
验证至少n位数字：^\d{n,}$
验证m-n位的数字：^\d{m,n}$
验证零和非零开头的数字：^(0|[1-9][0-9]*)$
验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
验证非零的正整数：^\+?[1-9][0-9]*$
验证非零的负整数：^\-[1-9][0-9]*$
验证非负整数（正整数 + 0） ^\d+$
验证非正整数（负整数 + 0） ^((-\d+)|(0+))$
验证长度为3的字符：^.{3}$
验证由26个英文字母组成的字符串：^[A-Za-z]+$
验证由26个大写英文字母组成的字符串：^[A-Z]+$
验证由26个小写英文字母组成的字符串：^[a-z]+$
验证由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
验证由数字、26个英文字母或者下划线组成的字符串：^\w+$
验证用户密码:^[a-zA-Z]\w{5,17}$ 正确格式为：以字母开头，长度在6-18之间，只能包含字符、数字和下划线。
验证是否含有 ^%&',;=?$\" 等字符：[^%&',;=?$\x22]+
验证汉字：^[\u4e00-\u9fa5],{0,}$
验证Email地址：/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/
验证InternetURL：^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ；^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
验证电话号码：^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$：--正确格式为：XXXX-XXXXXXX，XXXX-XXXXXXXX，XXX-XXXXXXX，XXX-XXXXXXXX，XXXXXXX，XXXXXXXX。
验证身份证号（15位或18位数字）：^\d{15}|\d{}18$
验证一年的12个月：^(0?[1-9]|1[0-2])$ 正确格式为：“01”-“09”和“1”“12”
验证一个月的31天：^((0?[1-9])|((1|2)[0-9])|30|31)$ 正确格式为：01、09和1、31。
整数：^-?\d+$
非负浮点数（正浮点数 + 0）：^\d+(\.\d+)?$
正浮点数 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮点数（负浮点数 + 0） ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
负浮点数 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮点数 ^(-?\d+)(\.\d+)?$
如何查看调试信息
调试信息看开发工具 .
如果想debug 在代码里加上debuger即可