Naming small procedures

Making the address https://github.com/calvin008/… This is a small naming program (naming poetry) launched by UNI-APP + Unicloud.

1. Generate names by matching ancient poems and words

1.1 Create Project

1.2 Front-end configuration of UNI-APP

Component selection

Radio radio

Input fields 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" BBB </image> <input confirmation -type="search" v-model="userName" focus placeholder=" int "/> <button Class ="name-list"> <view class="name-list"> <view class="name-list"> <view class="name-list"> <view class="name-container" v-for="item in nameList" :key="item._id"> <view class="name-info"> {{userName}}{{item.name}} < / view > < the view class = "sentence" > / {{item. What}} < / view > < the view class = "name - other" > < view > {{item. Book}}" {{item.title}}</view> <view>[{{item.dynasty}}] {{item.author}}</view> </view> </view> </view>

Insert data

Array: [' array '], array: [' array '], array: [' array '], array:

Vue Event.target.value () Gets the value of the current text box (when triggered by the event)

Scenario description: Suppose there is a text field, and after I type the content, enter or click a button,

We bind an event to the input or to the button, fire the event and execute the corresponding methods handler. How do we get the value in the textbox from the methods function?

1.3 Name the Form component

The front-end logic

Can’t be empty

No more than two digits

Cannot be letters/numbers other than Chinese characters

**Object.keys()** method returns an array of the self-enumerable properties of a given Object in the same order that would be returned if we iterated over the Object normally

ES5 Non-Object -> TypeError

ES6 turn object – > body can enumerate an array of attributes

Judge the regularity of Chinese characters

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

1.4 Unicloud GetName cloud function

1.5 regular expressions tutorial

Hello, everyone. I’m Wang Dahe

What is a regular expression?

A regular expression is a logical formula for manipulating strings,

Is a predefined set of specific characters and a combination of those specific characters,

Construct a “rule string” that expresses a filtering logic for strings

Why regular?

Form validation is to accurately determine whether a string is of a fixed format. For example, mailbox verification, mobile phone number verification and so on. The purpose is to avoid malicious users’ random input so that the form collection is in the format we want!

Regular expression syntax support

Where are regular expressions used?

First, the development of common, special demand expression

1. Email Address: ^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
2. Domain: a zA – Z0-9 on conversion {0} (/. A zA – Z0-9 on conversion {0}) + /.?
3. InternetURL: [a zA – z] + : / /¹Or ^http://([\w-]+.) +[\w-]+(/[\w-./?%&=])? $
4. Mobile phone number: ^ (13 [0-9] | | 5 | [7] 14 15 [0 | 1 | 2 | 3 | 5 6 7 8 | | | | 9] | 18 [0 | 1 | 2 | 3 | 5 6 7 8 | | | | 9]) \ d {8} $
5. Phone number (” XXX – XXXXXXX “, “XXXX – XXXXXXXX”, “XXX – XXXXXXX”, “XXX – XXXXXXXX”, “XXXXXXX” and “XXXXXXXX) : ^ ((\ d {3, 4} -) | \ d {} 3.4 -)? \ d {7, 8} $
6. Home phone number (0511-4405222, 021-87888822) : \ d {3} – \ d {8} | \ d {4} – \ d {7}
7. Id number (15, 18 digits) : ^ \ d {15} | \ d {and} $
8. Short id number (Numbers, the letter “x” at the end) : ^ ([0-9] {7, 17} (x | x)? $or ^ \ d {8} 16 | x [0-9] {8} 16 | x [0-9] {8} 16? $
9. Is the account valid (starting with letters, 5-16 bytes allowed, alphanumeric underscore allowed) : ^ a-za-z {4,15}$
10. Password (starting with a letter, length between 6 and 18, can only contain letters, numbers, and underscores) : ^[a-za-z]\w{5,17}$
11. Strong password (must contain a combination of upper and lower case letters and numbers, no special characters, length between 8 and 10) : ^(? =.\d)(? =.[a-z])(? =. * [a-z]). 8, 10 {} $
12. Date format: ^\d{4}-\d{1,2}-\d{1,2}
13. 12 months of the year (01 ~ 09 and 1 ~ 12) : ^(0? [1-9] [2-0]) $| 1
14. 31 days of a month (01 ~ 09 and 1 ~ 31) : ^((0? [1-9]) | | 2 (1) ([0-9]) | | 31) $30
15. ^([a-za-z]+-?) +[a-zA-Z0-9]+\.x|X[l|L]$
16. Regular expressions for Chinese characters: [\u4e00-\u9fa5]
17. Double byte characters: 2 (including Chinese characters, can be used to calculate the length of the string (a double byte character length is 2, ASCII character length is 1))
18. Regular expression for blank lines: \n\s*\r (can be used to delete blank lines)
19. Regular expressions for HTML tags: <(\S?).³>.? < 1 > / \ | <.? /> (The version circulating on the web is too bad, the above one is only partial, it still doesn’t work for complex nested tags)
20. Regular expression for leading and trailing whitespace characters: ^\s|\s$or (^ \ s *) | (\ s * $) (can be used to delete rows first line of white space characters (including Spaces, tabs, form-feed character, etc.), very useful expressions)
21. Tencent QQ number: 1-9{4,} (Tencent QQ number from 10000)
22. [1-9]\ D {5}(? ! \d) (China Postal Code with 6 digits)
23. IP address: \ D +.\ D +.\ D +.\ D + (useful when extracting IP address)
24. IP address :(? : (? :25[0-5]|2[0-4]\d|[01]? \d? \d)\.) {3} (? :25[0-5]|2[0-4]\d|[01]? \d? \d))

The expression of the checksum character

1. Chinese characters: ^ [\ u4e00 – \ u9fa5] {0} $
2. ^[a-za-z0-9]+$or ^[a-za-z0-9]{4,40}$
3. All characters of length 3-20: ^.{3,20}$
4. ^[a-za-z]+$^[a-za-z]+$^[a-za-z]+$
5. A string of 26 uppercase letters: ^[a-z]+$
6. A string of 26 lowercase English characters: ^[a-z]+$
7. ^[a-za-z0-9]+$^[a-za-z0-9]+$^[a-za-z0-9]+$
8. A string consisting of numbers, 26 letters, or underscores: ^\w+$or ^\w{3,20}$
9. Chinese, English, numbers including underline: ^[\ u4e00-\ u9fa5a-za-z0-9_]+$
10. ^[\ u4e00-\ u9fa5a-za-z0-9]+$or ^[\ u4e00-\ u9fa5a-za-z0-9]{2,20}$
11. You can type with ^%&’,; =? $\” : [^%&’,;=?$\x22]+ 12 Disallow input containing ~ : 4+

3, check the number of the expression

1. The Numbers: ^ [0-9] * $
2. N digit: ^\d{n}$
3. Numbers with at least n bits: ^\d{n,}$
4. M -n digits: ^\d{m,n}$
5. The number of zero and non-zero start: ^ (0 | 1-9 *) $
6. ^(1-9*)+(.[0-9]{1,2})? $
7. A positive or negative number with 1 or 2 decimals: ^(-)? \ d + (. \ d {1, 2})? $
8. Positive, negative, and decimal: ^ (+) – |? \d+(.\d+)? $
9. ^[0-9]+(.[0-9]{2})? $
10. ^[0-9]+(.[0-9]{1,3})? $
11. Non-zero positive integer: ^[1-9]\d$or ^([1-9][0-9]*){1,3}$or ^+? 1-9$
12. Non-zero negative integer: ^-[1-9][]0-9″*$or ^-[1-9]\d*$
13. Non-negative integers: ^ \ d + $or ^ 1-9] [\ | 0 $d *
14. A positive integer: ^ – [1-9] \ | d * $0 or ^ ((\ d +) | (0 +)) $
15. Non-negative floating point numbers: ^\d+(.\d+)? $or ^ [1-9] \ d * \ \ d * \ | 0. [1-9] \ d \ d * * | 0? \. | 0 0 + $
16. Non-positive float: ^((-\d+(.\d+)?) | ((. 0 0 + +)?) ) $or ^ (- (1-9] [\ d * \ \ d * \ | 0. [1-9] \ d \ d * *)) | 0? \. | 0 0 + $
17. ^[1-9]\d.\d|0.\d[1-9]\d$or ^ (([0-9] + \. [0-9] * [1-9] [0-9] *) | ([0-9] * [1-9] [0-9] * \ [0-9] +) | ([0-9] * [1-9] [0-9] *)) $
18. Negative float: ^-([1-9]\d.\d|0.\d[1-9]\d) $or ^ (- (([0-9] + \. [0-9] * [1-9] [0-9] *) | ([0-9] * [1-9] [0-9] * \ [0-9] +) | ([0-9] * [1-9] [0-9] *))) $
19. Floating-point: ^(-? \d+)(.\d+)? $or ^ -? ([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0? $\. | 0 + 0)

1.6 Regular matching poems

1. Clean the data first

In the process of… Heavy use of regular

const List = res.result.data const Result = [] List.forEach((item,index) => { var object = {} object = item.content Object = object. The replace (/ \ | s < br > | < p > | < \ / p > | | "|"/g, ' ') object = object. The 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 : 'Anonymous' str.book = item.book str.dynasty = item.dynasty result.push (STR)}) this.namelist = Result})

2 ahead of the poem and name keywords

// Randbetween (min, min) max) { // [min,max) max is not included return min + Math.floor(Math.random() * (max - min)); }, / / clear the punctuation cleanPunctuation (STR) {const puncReg = / [< > ""! * \ (\ ^ \ \ $% ~! @ # %... & RMB - \ + =,.,?;" "" : · ']/g; return STR. Replace (puncReg, ");}, RandcharFromStr (STR, num, STR); 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. Front and rear data

<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. The title}} < / view > < view > / {{item. Dynasty}} {{item. The author}} < / view > < view > < / view > < / view >

4. Beautification style

.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.7 Uni-App uses the WXS template

The goal is to change the color of the name keyword in the verse parameter

Since indexOf is used to match keywords, applets do not support the indexOf function

The native solution to the applet is to create a WXS template file and introduce IndexOf

This requires that the uni-app also support WXS, which is already supported by uni-app

So the applet side can continue to play, but this has to take into account the multi-port compatibility of uni-app

I get the data, split into a single – word array

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

2 Since indexOf cannot be referenced, create a WXS template to solve this problem

<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 Use a V-for loop to display the verse and name

<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>

Finally, change the style

.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.8 Unicloud whitelist configuration

Each small program platform, are required in the small program management background configuration small program application network server domain name, otherwise can not network.

After using Unicloud, developers will no longer need to buy and record their own domain name, directly fill in the Unicloud domain name in the small program management background can be.

According to the following table, the request legal domain name and the uploadFile legal domain name are set in the background of small program management (if there is no file uploading business, they can not be set). The domain names in the following table are owned by Ali Cloud or Tencent Cloud, not by dCloud.

If you need to request files from the cloud storage using uni.request, you need to configure the cloud storage domain (the Download legal domain in the table above) to the request legal domain

Small program development tools of the real machine preview function, must add the above domain whitelist, otherwise unable to call the cloud function. Simulator PC side preview, real machine debugging is not affected by this.

If the URL is still reported not in domain list but the legitimate domain name is properly configured, please try to delete the applet on the mobile phone, clean up the client cache where the applet is located, restart the corresponding applet development tool and try again

1. \ s ↩
2. \ x00 – \ XFF ↩
3. > ↩
4. ~ \ x22 ↩