# Knowledge Code Guide 学习编程知识与笔记 ## 2018年学习Html+CSS ## 2019年学习Javascript+PHP ## 2020年学习微信小程序 # Dictionary | **Name** | **Example** | | ----------------------- | -------------------------------------------- | | \\ | \happy\ | | \ | \ | | \\ | | | \

| \

| | \\ | | | \\ | | | \ | \ mypic

| | \ | \ | | \

| \

| | \ ``` # Reference 网页的动作语言 Examples are better than 1000 words.——一例胜千言 ### 引用 \\ \\ \ ```javascript ``` ### 输出 * innerHTML ```javascript document.getElementById("demo").innerHTML='Hello World!'; ``` * document.write() * window\.alert() * console.log() * print() ### 控制 * getElementById("demo") * getElementsByClassName("demo") * getElementsByTagName("p") * querySelectorAll("p.intro") ### 声明 * var * let * cost ### 注释 * //单行注释 * /\*多行注释\*/ ### 运算符 * \+ * \- * \* * \*\* * / * % * ++ * \-- * && * || * ! * \== * \=== * != * !== * \> * < * \>= * <= * ? * += * -= * \*= * /= * %= * \*\*= ### 函数 ```javascript function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 } ``` * 数组：x = \["a","b","c"] * 物体：x={name:"fiat",model:"modern",color:"white"} ### 字符串处理 * .length * indexOf() * lastIndexOf() * search() * slice() * substring() * substr() * replace() * toUpperCase() * toLowerCase() * concat() * trim() * charAt() * charCodeAt() * split() ### 数字 Js语法中，支持数位是15位，以及小数点后17位。 NaN = not a number isNaN() 数字进制 ```javascript var myNumber = 32; myNumber.toString(10); // returns 32 myNumber.toString(32); // returns 10 myNumber.toString(16); // returns 20 myNumber.toString(8); // returns 40 myNumber.toString(2); // returns 100000 ``` 数字变成物体 ```javascript var x = new Number(124); ``` * toExponential() * toFixed() * toPrecision() ### 数组 ```javascript var cars = ["Saab", "Volvo", "BMW"];||var cars = new Array("Saab", "Volvo", "BMW"); ``` * array.foreach() * array.push() * array.pop() * typeof.array * array.join("\*") * array.shift() * array.unshift() * delete array\[0] * array.splice(2,0,"apple","orange") * array.concat(array) * sort() * reverse() 调用 ```javascript person.lastName;||person["lastName"]; ``` ### 时间 * Date(year, month, day, hours, minutes, seconds, milliseconds) * toUTCString() * toISOString() * toDateString() | getFullYear() | Get the **year** as a four digit number (yyyy) | | ----------------- | ------------------------------------------------- | | getMonth() | Get the month as a number (0-11) | | getDate() | Get the day as a number (1-31) | | getHours() | Get the hour (0-23) | | getMinutes() | Get the minute (0-59) | | getSeconds() | Get the second (0-59) | | getMilliseconds() | Get the millisecond (0-999) | | getTime() | Get the time (milliseconds since January 1, 1970) | | getDay() | Get the weekday as a number (0-6) | | Date.now() | Get the time. ECMAScript 5. | | Method | Description | | -------------------- | ----------------------------------------------------------- | | getUTCDate() | Same as getDate(), but returns the UTC date | | getUTCDay() | Same as getDay(), but returns the UTC day | | getUTCFullYear() | Same as getFullYear(), but returns the UTC year | | getUTCHours() | Same as getHours(), but returns the UTC hour | | getUTCMilliseconds() | Same as getMilliseconds(), but returns the UTC milliseconds | | getUTCMinutes() | Same as getMinutes(), but returns the UTC minutes | | getUTCMonth() | Same as getMonth(), but returns the UTC month | | getUTCSeconds() | Same as getSeconds(), but returns the UTC seconds | | Method | Description | | ----------------- | ------------------------------------------------- | | setDate() | Set the day as a number (1-31) | | setFullYear() | Set the year (optionally month and day) | | setHours() | Set the hour (0-23) | | setMilliseconds() | Set the milliseconds (0-999) | | setMinutes() | Set the minutes (0-59) | | setMonth() | Set the month (0-11) | | setSeconds() | Set the seconds (0-59) | | setTime() | Set the time (milliseconds since January 1, 1970) | ### 数学 * Math.PI * Math.round() * Math.pow() * Math.sqrt() * Math.abs() * Math.ceil() * Math.floor() * Math.sin() * Math.cos() * Math.min() * Math.max() * Math.random() * Math.E * Math.SQRT2 * Math.SQRT1\_2 * Math.LN2 * Math.LN10 * Math.LOG2E * Math.LOG10E ### 逻辑 ### 逻辑 True or False ```javascript if (condition) { // block of code to be executed if the condition is true } else { // block of code to be executed if the condition is false } ``` * Boolean() * variablename = (condition) ? value1:value2 ```javascript if (condition1) { // block of code to be executed if condition1 is true } else if (condition2) { // block of code to be executed if the condition1 is false and condition2 is true } else { // block of code to be executed if the condition1 is false and condition2 is false } ``` ```javascript switch(expression) { case x: // code block break; case y: // code block break; default: // code block } ``` ```javascript switch (new Date().getDay()) { case 6: text = "Today is Saturday"; break; case 0: text = "Today is Sunday"; break; default: text = "Looking forward to the Weekend"; } ``` # Reference | Name | Description | Example | | :--------: | :--------------------------------------------: | :-------: | | g | global boundary | /\[a-z]/g | | globle | test g is or not | | | i | case-insensitive | /\[a-z]/i | | ignoreCase | test i is or not | | | . | any character except newline | /\*/ | | \w | word equal to \[A-z] | /\w/ | | \W | not word equal to \[]\*%$@# etc | /\W/ | | \d | digit equal to \[0-9] | /\d/ | | \D | not digit equal to anything except for \[0-9] | /\D/ | | \s | whitespace | /\s/ | | \S | not whitespace | /\S/ | | \[ABC] | select A, B or C; if it's \[D], select D | /\[ABC]/ | | \[^ABC] | not select A, B or C; select others | /\[^ABC]/ | | \b | select a word the last alphabet | /ed\b/ | | \D | select a word not the last alphabet | /ed\D/ | | ^ | start | /^ed/ | | $ | end | /ed$/ | # 开篇学习微信小程序知识与笔记 ## 微信小程序是什么微信小程序是腾讯公司旗下微信推出的一种轻型应用，置于微信之中，随时启用，免去安装，释放空间，总之是一种很方便的形式。 ## 微信小程序为什么要建立 * 对用户：方便，快捷，免安装 * 对开发者：赚取广告费，实现人生价值 ## 微信小程序如何创建这一套知识手册与笔记是伯衡君我从零开始（也不算零啦，姑且听之），创建微信小程序的记录和成长。 # 流程从创建到上传流程 1. 下载微信小程序开发者工具，网址是 2. 下载好后安装微信小程序开发者工具 3. 安装完成后，打开，输入之前在微信小程序平台注册好后获得的AppID，有源码就直接导入，没有源码就新建 4. 调试小程序，确认没有Bug 5. 上传，并在小程序公众平台后台进行审核 6. 审核通过后上线 7. 绑定到自家微信公众号 8. 开通流量主收钱 # 构成 ## 不同类型文件 1. `.json` 后缀的 `JSON` 配置文件，JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。 2. `.wxml` 后缀的 `WXML` 模板文件，在小程序中也有同样的角色，其中 `WXML` 充当的就是类似 `HTML` 的角色。打开 `pages/index/index.wxml`，你会看到类似于html的代码 3. `.wxss` 后缀的 `WXSS` 样式文件， `WXSS` 具有 `CSS` 大部分的特性，小程序在 `WXSS` 也做了一些扩充和修改。 4. `.js` 后缀的 `JS` 脚本逻辑文件，一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 `JS` 脚本文件来处理用户的操作。 ## 目录结构 | 文件 | 必需 | 作用 | | -------- | -- | -------- | | app.js | 是 | 小程序逻辑 | | app.json | 是 | 小程序公共配置 | | app.wxss | 否 | 小程序公共样式表 | 一个小程序页面由四个文件组成，分别是： | 文件类型 | 必需 | 作用 | | ---- | -- | ----- | | js | 是 | 页面逻辑 | | wxml | 是 | 页面结构 | | json | 否 | 页面配置 | | wxss | 否 | 页面样式表 | **注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。** * index.js * index.wxml * index.json * index.wxss # 框架小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。整个小程序框架系统分为两部分：**逻辑层**（App Service）和 **视图层**（View）。小程序提供了自己的视图层描述语言 `WXML` 和 `WXSS`，以及基于 `JavaScript` 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。 #### 响应的数据绑定框架的核心是一个响应的数据绑定系统，可以让数据与视图非常简单地保持同步。当做数据修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。通过这个简单的例子来看：在开发者工具中预览效果 ``` Hello {{name}}! ``` ``` // This is our App Service. // This is our data. var helloData = { name: 'Weixin' } // Register a Page. Page({ data: helloData, changeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) } }) ``` * 开发者通过框架将逻辑层数据中的 `name` 与视图层的 `name` 进行了绑定，所以在页面一打开的时候会显示 `Hello Weixin!`； * 当点击按钮的时候，视图层会发送 `changeName` 的事件给逻辑层，逻辑层找到并执行对应的事件处理函数； * 回调函数触发后，逻辑层执行 `setData` 的操作，将 `data` 中的 `name` 从 `Weixin` 变为 `MINA`，因为该数据和视图层已经绑定了，从而视图层会自动改变为 `Hello MINA!`。 #### 页面管理框架管理了整个**小程序**的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到框架中，其他的一切复杂的操作都交由框架处理。 #### 基础组件框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，开发者可以通过组合基础组件，创建出强大的**微信小程序** 。 #### 丰富的 API 框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。 # 配置 ## 全局配置 ### **app.json** 小程序根目录下的 `app.json` 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。 #### entryPagePath 指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 `pages` 列表的第一项。不支持带页面路径参数。 ``` { "entryPagePath": "pages/index/index" } ``` **pages** ``` { "pages": ["pages/index/index", "pages/logs/logs"] } ``` #### window 用于设置小程序的状态栏、导航条、标题、窗口背景色。 ![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MFf2SHaBmDcXNLi-Xxg%2F-MFfTcquvF7xOMkbxBXj%2F1.png?alt=media\&token=43454a6e-16c0-4023-bdc8-b15377cbaf51) * **navigationBarBackgroundColor** 导航栏背景颜色 * **navigationBarTextStyle** 导航栏标题颜色两个参数“black”和“white” * **navigationBarTitleText** 导航栏标题文字内容 * **navigationStyle** 导航栏样式仅支持default和custom * **backgroundColor** #ffffff * **backgroundTextStyle** 下拉 loading 的样式，仅支持 `dark` / `light` * **backgroundColorTop** 顶部窗口的背景色，仅 iOS 支持 * **backgroundColorBottom** 底部窗口的背景色，仅 iOS 支持 * **onReachBottomDistance** * **enablePullDownRefresh** 页面刷新，true or false * **pageOrientation** 页面旋转，拥有参数auto/portrait/landscape，其中auto是跟随系统旋转，landscape是固定横屏，portrait是固定竖屏，如果要支持ipad，则需要是使用如下的命令： ``` { "resizable": true } ``` **tap** 如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。其中 list 接受一个数组，**只能配置最少 2 个、最多 5 个 tab**。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下： ![](https://3789401910-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MF_lLv3y87pOLfxROPC%2F-MFhin4Oy2Mt8ATSdgD4%2F-MFhjuZKNgV7eSQwb7FJ%2Fimage.png?alt=media\&token=5c7390cd-2b4e-4d53-b09b-f17ffdc6b74e) #### networkTimeout 各类网络请求的超时时间，单位均为毫秒。 ### app.wxss ### app.js #### App(Object object) 注册小程序。接受一个 `Object` 参数，其指定小程序的生命周期回调等。 App() 必须在 `app.js` 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。 **参数** **Object object** | 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | | -------------------- | -------- | --- | -- | --------------------------------------------- | ------ | | **onLaunch** | function | | 否 | 生命周期回调——监听小程序初始化。 | | | onShow | function | | 否 | 生命周期回调——监听小程序启动或切前台。 | | | onHide | function | | 否 | 生命周期回调——监听小程序切后台。 | | | onError | function | | 否 | 错误监听函数。 | | | onPageNotFound | function | | 否 | 页面不存在监听函数。 | 1.9.90 | | onUnhandledRejection | function | | 否 | 未处理的 Promise 拒绝事件监听函数。 | 2.10.0 | | onThemeChange | function | | 否 | 监听系统主题变化 | 2.11.0 | | 其他 | any | | 否 | 开发者可以添加任意的函数或数据变量到 `Object` 参数中，用 `this` 可以访问 | | ### Sitemap.json 小程序根目录下的 `sitemap.json` 文件用来配置小程序及其页面是否允许被微信索引。 ``` { "rules":[{ "action": "allow", "page": "*" }] } ``` # index.wxml+index.js ## 简单绑定数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于： #### 内容 ``` {{ message }} ``` ``` Page({ data: { message: 'Hello World!' } }) ``` #### 组件属性(需要在双引号之内) ``` ``` ``` Page({ data: { id: 0 } }) ``` #### 控制属性(需要在双引号之内) ``` ``` ``` Page({ data: { condition: true } }) ``` #### 关键字(需要在双引号之内) `true`：boolean 类型的 true，代表真值。 `false`： boolean 类型的 false，代表假值。 ``` ``` 特别注意：不要直接写 `checked="false"`，其计算结果是一个字符串，转成 boolean 类型后代表真值。 ### 运算可以在 `{{}}` 内进行简单的运算，支持的有如下几种方式： #### 三元运算 ``` ``` #### 算数运算 ``` {{a + b}} + {{c}} + d ``` ``` Page({ data: { a: 1, b: 2, c: 3 } }) ``` view中的内容为 `3 + 3 + d`。 #### 逻辑判断 ``` ``` #### 字符串运算 ``` {{"hello" + name}} ``` ``` Page({ data:{ name: 'MINA' } }) ``` #### 数据路径运算 ``` {{object.key}} {{array[0]}} ``` ``` Page({ data: { object: { key: 'Hello ' }, array: ['MINA'] } }) ``` ## 组合也可以在 Mustache 内直接进行组合，构成新的对象或者数组。 #### 数组 ``` {{item}} ``` ``` Page({ data: { zero: 0 } }) ``` 最终组合成数组`[0, 1, 2, 3, 4]`。 #### 对象 ``` ``` ``` Page({ data: { a: 1, b: 2 } }) ``` 最终组合成的对象是 `{for: 1, bar: 2}` 也可以用扩展运算符 `...` 来将一个对象展开 ``` ``` ``` Page({ data: { obj1: { a: 1, b: 2 }, obj2: { c: 3, d: 4 } } }) ``` 最终组合成的对象是 `{a: 1, b: 2, c: 3, d: 4, e: 5}`。如果对象的 key 和 value 相同，也可以间接地表达。 ``` ``` ``` Page({ data: { foo: 'my-foo', bar: 'my-bar' } }) ``` 最终组合成的对象是 `{foo: 'my-foo', bar:'my-bar'}`。 **注意**：上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面，如： ``` ``` ``` Page({ data: { obj1: { a: 1, b: 2 }, obj2: { b: 3, c: 4 }, a: 5 } }) ``` 最终组合成的对象是 `{a: 5, b: 3, c: 6}`。 **注意：** 花括号和引号之间如果有空格，将最终被解析成为字符串 ``` {{item}} ``` 等同于 ``` {{item}} ``` #### wx:for 在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 `index`，数组当前项的变量名默认为 `item` ``` {{index}}: {{item.message}} ``` ``` Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) ``` 使用 `wx:for-item` 可以指定数组当前元素的变量名，使用 `wx:for-index` 可以指定数组当前下标的变量名： ``` {{idx}}: {{itemName.message}} ``` `wx:for` 也可以嵌套，下边是一个九九乘法表 ``` {{i}} * {{j}} = {{i * j}} ``` #### block wx:for 类似 `block wx:if`，也可以将 `wx:for` 用在``标签上，以渲染一个包含多节点的结构块。例如： ``` {{index}}: {{item}} ``` #### wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 [input](https://developers.weixin.qq.com/miniprogram/dev/component/input.html) 中的输入内容，[switch](https://developers.weixin.qq.com/miniprogram/dev/component/switch.html) 的选中状态），需要使用 `wx:key` 来指定列表中项目的唯一的标识符。 `wx:key` 的值以两种形式提供 1. 字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。 2. 保留关键字 `*this` 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。 **如不提供 `wx:key`，会报一个 `warning`，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。** **示例代码：** 在开发者工具中预览效果 ``` {{item.id}} {{item}} ``` ``` Page({ data: { objectArray: [ {id: 5, unique: 'unique_5'}, {id: 4, unique: 'unique_4'}, {id: 3, unique: 'unique_3'}, {id: 2, unique: 'unique_2'}, {id: 1, unique: 'unique_1'}, {id: 0, unique: 'unique_0'}, ], numberArray: [1, 2, 3, 4] }, switch: function(e) { const length = this.data.objectArray.length for (let i = 0; i < length; ++i) { const x = Math.floor(Math.random() * length) const y = Math.floor(Math.random() * length) const temp = this.data.objectArray[x] this.data.objectArray[x] = this.data.objectArray[y] this.data.objectArray[y] = temp } this.setData({ objectArray: this.data.objectArray }) }, addToFront: function(e) { const length = this.data.objectArray.length this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray) this.setData({ objectArray: this.data.objectArray }) }, addNumberToFront: function(e){ this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray) this.setData({ numberArray: this.data.numberArray }) } }) ``` **注意：** 当 `wx:for` 的值为字符串时，会将字符串解析成字符串数组 ``` {{item}} ``` 等同于 ``` {{item}} ``` **注意：** 花括号和引号之间如果有空格，将最终被解析成为字符串 ``` {{item}} ``` 等同于 ``` {{item}} ``` ## 模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。 #### 定义模板使用 name 属性，作为模板的名字。然后在`