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
| Command or environment | . | [] | ^ | $ | ( ) | {} | ? | + | * * \ | 支那 | ( ) |
|---|---|---|---|---|---|---|---|---|---|---|---|
| vi | Square root | Square root | Square root | Square root | Square root | ||||||
| Visual C++ | Square root | Square root | Square root | Square root | Square root | ||||||
| awk | Square root | Square root | Square root | Square root | Awk supports this syntax, as long as you add the –posix or –re-interval parameter to the command line, which shows the interval expression in man awk | Square root | Square root | Square root | Square root | ||
| sed | Square root | Square root | Square root | Square root | Square root | Square root | |||||
| delphi | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | ||
| python | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | |
| java | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | |
| javascript | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | ||
| php | Square root | Square root | Square root | Square root | Square root | ||||||
| perl | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | ||
| C# | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root | Square root |
Where are regular expressions used?
First, the development of common, special demand expression
- Email Address: ^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
- Domain: a zA – Z0-9 on conversion {0} (/. A zA – Z0-9 on conversion {0}) + /.?
- InternetURL: [a zA – z] + : / /1Or ^http://([\w-]+.) +[\w-]+(/[\w-./?%&=])? $
- 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} $
- Phone number (” XXX – XXXXXXX “, “XXXX – XXXXXXXX”, “XXX – XXXXXXX”, “XXX – XXXXXXXX”, “XXXXXXX” and “XXXXXXXX) : ^ ((\ d {3, 4} -) | \ d {} 3.4 -)? \ d {7, 8} $
- Home phone number (0511-4405222, 021-87888822) : \ d {3} – \ d {8} | \ d {4} – \ d {7}
- Id number (15, 18 digits) : ^ \ d {15} | \ d {and} $
- 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? $
- Is the account valid (starting with letters, 5-16 bytes allowed, alphanumeric underscore allowed) : ^ a-za-z {4,15}$
- Password (starting with a letter, length between 6 and 18, can only contain letters, numbers, and underscores) : ^[a-za-z]\w{5,17}$
- 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 {} $
- Date format: ^\d{4}-\d{1,2}-\d{1,2}
- 12 months of the year (01 ~ 09 and 1 ~ 12) : ^(0? [1-9] [2-0]) $| 1
- 31 days of a month (01 ~ 09 and 1 ~ 31) : ^((0? [1-9]) | | 2 (1) ([0-9]) | | 31) $30
- ^([a-za-z]+-?) +[a-zA-Z0-9]+\.x|X[l|L]$
- Regular expressions for Chinese characters: [\u4e00-\u9fa5]
- 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))
- Regular expression for blank lines: \n\s*\r (can be used to delete blank lines)
- Regular expressions for HTML tags: <(\S?).3>.? < 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)
- 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)
- Tencent QQ number: 1-9{4,} (Tencent QQ number from 10000)
- [1-9]\ D {5}(? ! \d) (China Postal Code with 6 digits)
- IP address: \ D +.\ D +.\ D +.\ D + (useful when extracting IP address)
- 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
- Chinese characters: ^ [\ u4e00 – \ u9fa5] {0} $
- ^[a-za-z0-9]+$or ^[a-za-z0-9]{4,40}$
- All characters of length 3-20: ^.{3,20}$
- ^[a-za-z]+$^[a-za-z]+$^[a-za-z]+$
- A string of 26 uppercase letters: ^[a-z]+$
- A string of 26 lowercase English characters: ^[a-z]+$
- ^[a-za-z0-9]+$^[a-za-z0-9]+$^[a-za-z0-9]+$
- A string consisting of numbers, 26 letters, or underscores: ^\w+$or ^\w{3,20}$
- Chinese, English, numbers including underline: ^[\ u4e00-\ u9fa5a-za-z0-9_]+$
- ^[\ u4e00-\ u9fa5a-za-z0-9]+$or ^[\ u4e00-\ u9fa5a-za-z0-9]{2,20}$
- You can type with ^%&’,; =? $\” : [^%&’,;=?$\x22]+ 12 Disallow input containing ~ : 4+
3, check the number of the expression
- The Numbers: ^ [0-9] * $
- N digit: ^\d{n}$
- Numbers with at least n bits: ^\d{n,}$
- M -n digits: ^\d{m,n}$
- The number of zero and non-zero start: ^ (0 | 1-9 *) $
- ^(1-9*)+(.[0-9]{1,2})? $
- A positive or negative number with 1 or 2 decimals: ^(-)? \ d + (. \ d {1, 2})? $
- Positive, negative, and decimal: ^ (+) – |? \d+(.\d+)? $
- ^[0-9]+(.[0-9]{2})? $
- ^[0-9]+(.[0-9]{1,3})? $
- Non-zero positive integer: ^[1-9]\d$or ^([1-9][0-9]*){1,3}$or ^+? 1-9$
- Non-zero negative integer: ^-[1-9][]0-9″*$or ^-[1-9]\d*$
- Non-negative integers: ^ \ d + $or ^ 1-9] [\ | 0 $d *
- A positive integer: ^ – [1-9] \ | d * $0 or ^ ((\ d +) | (0 +)) $
- Non-negative floating point numbers: ^\d+(.\d+)? $or ^ [1-9] \ d * \ \ d * \ | 0. [1-9] \ d \ d * * | 0? \. | 0 0 + $
- Non-positive float: ^((-\d+(.\d+)?) | ((. 0 0 + +)?) ) $or ^ (- (1-9] [\ d * \ \ d * \ | 0. [1-9] \ d \ d * *)) | 0? \. | 0 0 + $
- ^[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] *)) $
- 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] *))) $
- 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.
| Service provider | Request valid domain name | UploadFile valid domain name | Download the valid domain name | |
|---|---|---|---|
| Ali cloud | api.bspapp.com | bsppub.oss-cn-shanghai.aliyuncs.com | This configuration is required when you need to download files from the cloud storage. The different server space domain names are different, which can be seen in the Web Console view file details |
| Tencent cloud | tcb-api.tencentcloudapi.com | cos.ap-shanghai.myqcloud.com | This configuration is required when you need to download files from the cloud storage. The different server space domain names are different, which can be seen in the Web Console view file details |
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
- \ s ↩
- \ x00 – \ XFF ↩
- > ↩
- ~ \ x22 ↩