起名小程序

github 地址 https://github.com/calvin008/…
这是款 uni-app + unicloud 上线的起名小程序（诗歌起名）

1 通过古诗词匹配生成姓名

1.1 创立我的项目

1.2uni-app 前端配置

组件抉择

单选框 radio

输入框 input

按钮 button

    <view class="content">
        <view class="radio-list">
            <radio-group class="radio-group" @change="radioChange">
                <label class="radio" v-for="(item, index) in array" :key="index">
                    <view style="display: flex; flex-wrap: nowrap;">
                        <radio :value="item" color="#000000" :checked="index === current" />
                        <view>{{item}}</view>
                    </view>
                </label>
            </radio-group>
        </view>

        <view class="form-item">
            <image class="img" src="../../static/icon_search.png"></image>
            <input confirm-type="search" v-model="userName" focus placeholder="输出姓氏" />

            <button class="button" type="primary" size="mini" @click="subName"> 起名 </button>
        </view>
        
        <view class="name-list">
            <view class="name-container" v-for="item in nameList" :key="item._id">
                <view class="name-info">
                    {{userName}}{{item.name}}
                </view>
                <view class="sentence">[{{item.sentence}}]</view>
                <view class="name-other">
                    <view>{{item.book}} ● {{item.title}}</view>
                    <view>[{{item.dynasty}}] {{item.author}}</view>
                </view>
            </view>
            
        </view>

插入数据

array: ['唐诗', '宋词', '诗经', '楚辞', '乐府', '古诗词'],

Vue event.target.value() 获取以后文本框的值（由事件触发时）

情景形容：假如以后有一个文本框，当我输出内容之后，回车或者点击一个按钮，

             咱们在这个 input 上或者这个按钮上绑定事件，触发事件之后执行相应的 methods 中

             的处理函数，在 methods 中的函数中是如何获取文本框中的值的呢？

1.3 起名 form 组件

前端逻辑

不能为空

不能超过两位数

不能为汉字以外的字母 \ 数字

**Object.keys()** 办法会返回一个由一个给定对象的本身可枚举属性组成的数组，数组中属性名的排列程序和失常循环遍历该对象时返回的程序统一

es5 非对象 -> typeError

es6 转 对象 - > 身可枚举属性组成的数组

判断汉字正则

/^([\u4E00-\u9FA5])*$/

1.4unicloud 端 getName 云函数

1.5 正则表达式教程

大家好, 我是王大合

什么是正则表达式?

正则表达式是对字符串操作的一种逻辑公式，

就是用当时定义好的一些特定字符、及这些特定字符的组合，

组成一个“规定字符串”，这个“规定字符串”用来表白对字符串的一种过滤逻辑

为什么应用正则?

就是在表单验证时，精确的判断一个字符串是不是某种固定格局。比方邮箱的验证、手机号的验证等。目标是防止歹意用户的乱输出，使表单的收集是咱们想要的格局！

正则表达式语法反对状况

正则表达式用在哪些地方 ?

一、开发罕用，非凡需要表达式

1. Email 地址：^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
2. 域名：a-zA-Z0-9{0,62}(/.a-zA-Z0-9{0,62})+/.?
3. InternetURL：[a-zA-z]+://¹ 或 ^http://([\w-]+.)+[\w-]+(/[\w-./?%&=])?$
4. 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
5. 电话号码 (“XXX-XXXXXXX”、”XXXX-XXXXXXXX”、”XXX-XXXXXXX”、”XXX-
   XXXXXXXX”、”XXXXXXX” 和 ”XXXXXXXX)：^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6. 国内电话号码 (0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7. 身份证号 (15 位、18 位数字)：^\d{15}|\d{18}$
8. 短身份证号码 (数字、字母 x 结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$
9. 帐号是否非法 (字母结尾，容许 5 -16 字节，容许字母数字下划线)：^a-zA-Z{4,15}$
10. 明码 (以字母结尾，长度在 6~18 之间，只能蕴含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
11. 强明码 (必须蕴含大小写字母和数字的组合，不能应用特殊字符，长度在 8 -10 之间)：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$
12. 日期格局：^\d{4}-\d{1,2}-\d{1,2}
13. 一年的 12 个月 (01～09 和 1～12)：^(0?[1-9]|1[0-2])$
14. 一个月的 31 天 (01～09 和 1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
15. xml 文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\.x|X[l|L]$
16. 中文字符的正则表达式：[\u4e00-\u9fa5]
17. 双字节字符：² (包含汉字在内，能够用来计算字符串的长度 ( 一个双字节字符长度计 2，ASCII 字符计 1))
18. 空白行的正则表达式：\n\s*\r (能够用来删除空白行)
19. HTML 标记的正则表达式：<(\S?)³>.?</\1>|<.? /> (网上流传的版本太蹩脚，下面这个也仅仅能局部，对于简单的嵌套标记仍旧无能为力)
20. 首尾空白字符的正则表达式：^\s|\s$ 或 (^\s*)|(\s*$) (能够用来删除行首行尾的空白字符 ( 包含空格、制表符、换页符等等)，十分有用的表达式 )
21. 腾讯 QQ 号：1-9{4,} (腾讯 QQ 号从 10000 开始)
22. 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为 6 位数字)
23. IP 地址：\d+.\d+.\d+.\d+ (提取 IP 地址时有用)
24. IP 地址：((?:(?:25[0-5]|2[0-4]\d|[01]?\d?\d)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d?\d))

二、校验字符的表达式

1. 汉字：^[\u4e00-\u9fa5]{0,}$
2. 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3. 长度为 3 -20 的所有字符：^.{3,20}$
4. 由 26 个英文字母组成的字符串：^[A-Za-z]+$
5. 由 26 个大写英文字母组成的字符串：^[A-Z]+$
6. 由 26 个小写英文字母组成的字符串：^[a-z]+$
7. 由数字和 26 个英文字母组成的字符串：^[A-Za-z0-9]+$
8. 由数字、26 个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9. 中文、英文、数字包含下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10. 中文、英文、数字但不包含下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
11. 能够输出含有 ^%&’,;=?$\” 等字符：[^%&’,;=?$\x22]+ 12 禁止输出含有~ 的字符：⁴+

三、校验数字的表达式

1. 数字：^[0-9]*$
2. n 位的数字：^\d{n}$
3. 至多 n 位的数字：^\d{n,}$
4. m- n 位的数字：^\d{m,n}$
5. 零和非零结尾的数字：^(0|1-9*)$
6. 非零结尾的最多带两位小数的数字：^(1-9*)+(.[0-9]{1,2})?$
7. 带 1 - 2 位小数的负数或正数：^(-)?\d+(.\d{1,2})?$
8. 负数、正数、和小数：^(-|+)?\d+(.\d+)?$
9. 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$
10. 有 1~3 位小数的正实数：^[0-9]+(.[0-9]{1,3})?$
11. 非零的正整数：^[1-9]\d$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?1-9$
12. 非零的负整数：^-[1-9][]0-9″*$ 或 ^-[1-9]\d*$
13. 非负整数：^\d+$ 或 ^[1-9]\d*|0$
14. 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$
15. 非负浮点数：^\d+(.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$
16. 非正浮点数：^((-\d+(.\d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$
17. 正浮点数：^[1-9]\d.\d|0.\d[1-9]\d$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
18. 负浮点数：^-([1-9]\d.\d|0.\d[1-9]\d)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
19. 浮点数：^(-?\d+)(.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

1.6 正则匹配诗词

1 先荡涤数据

过程中 … 大量应用正则

                    const List = res.result.data
                    const Result = []
                    
                    List.forEach((item,index) => {var object = {}
                        object = item.content
                        object = object.replace(/\s|<br>|<p>|<\/p>| |”|“/g, '')
                        object = object.replace(/\(.+\)/g, '')
                        object = object.replace(/！|。|？|；/g, object => `${object}|`)
                        object = object.replace(/\|$/g, '')
                        let arr = object.split('|');
                            arr = arr.filter(item => item.length >= 2);
                            const sentence = arr[this.randBetween(0, arr.length)];
                        const cleanSentence = this.cleanPunctuation(sentence)
                        const name = this.randCharFromStr(cleanSentence, 2)
                        var str = {}
                        str.sentence = sentence
                        str.name = name
                        str.title = item.title
                        str.author = item.author ? item.author : '佚名'
                        str.book = item.book
                        str.dynasty = item.dynasty
                        Result.push(str)
                    })
                    this.nameList = Result
                })

2 提前诗文和姓名关键字

// 选取诗文
        randBetween(min, max) {// [min,max)  max is not included
           return min + Math.floor(Math.random() * (max - min));
         },
         // 清理标点符号
         cleanPunctuation(str) {const puncReg = /[<>《》！*\(\^\)\$%~!@#…&%￥—\+=、。，？；‘’“”：·`]/g;
             return str.replace(puncReg, '');
           },
           
          // 取两个字
           randCharFromStr(str, num, ordered) {if (typeof ordered === 'undefined') {ordered = true;}
               let randNumArr = this.genRandNumArr(str.length, num);
               if (ordered) {randNumArr = randNumArr.sort((a, b) => a - b);
               }
               let res = '';
               for (let i = 0; i < randNumArr.length; i++) {res += str.charAt(randNumArr[i]);
               }
               return res;
             },
              genRandNumArr(max, num) {if (num > max) {
                num = max;
                console.log(`max=${max} num = ${num}`);
                // throw new Error('too large num');
              }
              const orderedNum = [];
              for (var i = 0; i < max; i++) {orderedNum.push(i);
              }
              const res = [];
              for (var i = 0; i < num; i++) {const randIndex = this.randBetween(0, orderedNum.length);
                const randNum = orderedNum[randIndex];
                res.push(randNum);
                orderedNum.splice(randIndex, 1);
                // console.log('i=' + i + 'rand=' + rand, orderedNum);
              }
              return res;
            },

3 后前端数据

<view class="name-list">
            <view class="name-container" v-for="item in nameList" :key="item._id">
                <view class="name-info">
                    {{userName}}{{item.name}}
                </view>
                <view class="sentence">[{{item.sentence}}]</view>
                <view class="name-other">
                    <view>{{item.book}} ● {{item.title}}</view>
                    <view>[{{item.dynasty}}] {{item.author}}</view>
                </view>
            </view>
            
        </view>

4 丑化款式

.name-list {
    display: flex;
    flex-direction: column;
        
    .name-container {
        margin: 10px 20px;
        padding: 5px 5px;
        background-color: #f1f1f1;
        border: #333333 solid 1px;
        .name-info {
            font-size: 26px;
            font-weight:bold
        }
        .sentence {
            padding-top:5px;
            padding-bottom: 5px;
            padding-left: 30px;
            display: flex;
            flex-wrap: nowrap;
        }
        .name-other {pading:2px 2px}
    }

1.7uni-app 应用 wxs 模板

指标是扭转 诗句参数中 name 关键字的色彩

因为要应用 indexOf 匹配关键字, 然而小程序是不反对 indexOf 函数

小程序原生的解决方案是创立一个 wxs 的模板文件, 引入 indexOf

这样就须要 uni-app 也要反对 wxs, 索性, 目前 uni-app 曾经反对 wxs

所以小程序这边就能够持续玩上来, 然而这样就要思考 uni-app 在多端的兼容性

1 我把获取到的数据, 拆成单字的数组

str.sentence = sentence.split("")
                        str.name = name.split("")

2 因为无奈援用 indexOf, 所以创立 wxs 模板解决这个问题

<script module=”tools” lang=”wxs”>

function fn(arr, value) {if(arr.indexOf(value) < 0) {return false;} else {return true;}
}
module.exports = {fn:fn};

</script>

<script module="tools" lang="wxs">
    function fn(arr, value) {if(arr.indexOf(value) < 0) {return false;} else {return true;}
    }
    module.exports = {fn:fn};
</script>

3 应用 v -for 循环展现 诗句和姓名

<view class="name-info">
                    <view>
                        {{userName}}
                    </view>
                    <view  v-for="(name,index) in item.name" :key="index"
                    >{{name}}</view>
                </view>
                <view class="sentence">
                    <view>[</view>
                    <view  v-for="(sentence,index) in item.sentence" :key="index"
                    :class="tools.fn(item.name, sentence)?'active':'black'">{{sentence}}</view>
                    <view>]</view>
                </view>

4 最初扭转下款式即可

.name-list {
    display: flex;
    flex-direction: column;
        
    .name-container {
        margin: 10px 20px;
        padding: 5px 5px;
        background-color: #f1f1f1;
        border: #333333 solid 1px;
        .name-info {
            font-size: 26px;
            font-weight:bold;
            display: flex;
            flex-wrap: nowrap;
        }
        .sentence {
            padding-top:5px;
            padding-bottom: 5px;
            padding-left: 30px;
            display: flex;
            flex-wrap: nowrap;
            .active {color: #007AFF;}
            .black {color: #333333;}
        }
        
        .name-other {pading:2px 2px}
    }
    
}

1.8unicloud 白名单配置

各家小程序平台，均要求在小程序管理后盾配置小程序利用的联网服务器域名，否则无奈联网。

应用 uniCloud 后，开发者将不再须要本人购买、备案域名，间接将 uniCloud 的域名填写在小程序管理后盾即可。

依据下表，在小程序管理后盾设置 request 非法域名、uploadFile 非法域名（如没有上传文件业务，可不设置）。下表的域名均为阿里云或腾讯云自有域名，并非 DCloud 所属域名。

如果须要用 uni.request 申请云存储内的文件，须要将云存储域名（即上表中的 download 非法域名）配置到 request 非法域名内

小程序开发工具的真机预览性能，必须增加上述域名白名单，否则无奈调用云函数。模拟器的 PC 端预览、真机调试不受此影响。

如果遇到正确配置了非法域名然而仍然报 url not in domain list，请尝试删除手机上的小程序、清理小程序所在的客户端缓存、重启对应的小程序开发工具后重试

1. \s ↩
2. \x00-\xff ↩
3. > ↩
4. ~\x22 ↩