【weixin】【小程序】入门
<!--pages/wxml/index.wxml-->
<!--
<view>
<text>Hello Wechat mini World</text>
</view>
<view>
<image src="./image_one.png"></image>
</view>
<text>当前时间： {{time}}</text>
<view>{{w}}</view>
<view>{{W}}</view>
<view>{{undefined}}</view>
<view>{{null}}</view>
-->
<text>Hello Wechat World</text>
<!-- 栗子 三元运算 a=1 -->
<view>{{ a == 10? "变量 a 等于10": "变量 a 不等于10"}}</view>
<!-- 输出 变量 a 不等于10 -->
<!-- 栗子 算数运算 { a: 1, b: 2, c: 3 } -->
<view> {{ a + b }} + {{ c }} + d </view>
<!-- 输出 3 + 3 + d -->
<!-- 栗子 字符串拼接 {name: 'world'} -->
<view>{{ 'hello ' + name }}</view>
<!-- 输出 hello world -->
<!-- 栗子 常量 -->
<view>{{[1,2,3]}}</view>
<!-- 输出 1,2,3 -->
<!-- 栗子 逻辑判断 -->
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<!--length: 10 输出 1 -->
<!--length没定义 输出 3 -->
<!-- 栗子 逻辑判断 一次性判断多个组件标签-->
<block wx:if="{{false}}">
<view> view1 </view>
<view> view2 </view>
</block>
<!--无输出 -->
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
<!--输出
view1
view2
-->
<!-- 栗子 列表渲染 -->
<!-- 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item -->
<!-- 对应的脚本文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
-->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
<!-- 输出 0: foo -->
<!-- 栗子 列表渲染 指定数组当前元素和下标的变量名-->
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
<!-- 输出 0: foo -->
<!-- 栗子 列表渲染 <block/> -->
<block wx:for="{{[100,200,300]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
<!--
0:
100
1:
200
2:
300
-->
<!-- 栗子 列表渲染 动态 -->
<!--
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容， <switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供：
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
-->
<!--
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
})
}
})
-->
<switch wx:for="{{objectArray}}" wx:key="unique">{{item.id}}</switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add Numnber to the front </button>
<!--pages/wxml/index.wxml-->
<!-- 栗子 模版 -->
<!--
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段，
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，
-->
<!--
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2020-02-28'
},
},
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{...item}}"></template>
<!-- data不加三个点号 则只输出 : Time: -->
<!-- data加三个点号 则只输出
0: this is a template Time: 2016-06-18
-->
<!-- 栗子 模版 is可以动态决定具体需要渲染哪个模板 -->
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1,2,3,4,5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd' }}"></template>
</block>
<!-- 输出
odd
even
odd
even
odd
-->
<!-- 栗子 引用 -->
<!--
WXML 提供两种文件引用方式import和include。
import 可以在该文件中使用目标文件定义的 template，如：
在 item.wxml 中定义了一个叫 item的 template ：
-- item.wxml--
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用 item模板：
-->
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"></template>
<!-- 输出
forbar
-->
<!-- 栗子 引用 这里的引用非递归-->
<!--
需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
例如：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template
模板 A
-- A.wxml
<template name="A">
<text> A template </text>
</template>
模板 B
-- item.wxml --
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
模板 C
-- index.wxml --
<import src="b.wxml"/>
<template is="A"/> -- 这里将会触发一个警告，因为 b 中并没有定义模板 A --
<template is="B"/>
-->
<import src="item.wxml"/>
<template is="B"></template>
<!-- 输出
B template
-->
<!-- 栗子 引用 include-->
<!--
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，index.wxml
-- index.wxml -
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
--header.wxml--
<view> header </view>
-- footer.wxml --
<view> footer </view>
-->
<include src="header.wxml" />
<view> body </view>
<include src="footer.wxml" />
<!-- 输出
header
body
footer
-->
<!-- 栗子 wxss 引用 -->
<!--
在CSS中，开发者可以这样引用另一个样式文件：@import url('./test_0.css')
这种方法在请求上不会把test_0.css合并到index.css中，也就是请求index.css的时候，会多一个test_0.css的请求。
在小程序中，我们依然可以实现样式的引用，样式引用是这样写：
@import './test_0.wxss'
由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。
-->
<!-- 栗子 wxss 内联样式 -->
<!--
WXSS内联样式与Web开发一致
-->
<view style="color: red; font-size: 48rpx"> WXSS </view>
<!-- 栗子 wxss 动态更新内联样式 -->
<!--可动态变化的内联样式-->
<!--
{
eleColor: 'red',
eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"> WXSS </view>
<!-- 栗子 选择器 -->
<!--
--小程序WXSS支持的选择器--
类型 选择器 样例 样例描述
类选择器 .class .intro 选择所有拥有 class="intro" 的组件
id选择器 #id #firstname 选择拥有 id="firstname" 的组件
元素选择器 element view checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
伪元素选择器 ::after view::after 在 view 组件后边插入内容
伪元素选择器 ::before view::before 在 view 组件前边插入内容
权重
! important: 无限大 ；
style:"" : 1000
#id : 100
.class : 10
element : 1
权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。
-->
<!-- 栗子 js 模块化 -->
<!--
同目录下
--A.js--
module.exports = function( value ){
return value * 2;
}
--index.js--
var a = require('./A.js')
Page({
/**
* 页面的初始数据
*/
data: {
result: a(4)
...
-->
<!--
<view> {{result}} </view>
-->
<!--
8
-->
<!-- 栗子 js wxParse -->
<!--
没有完全必要学这个 只是我学小程序走的一个弯路而已 不过 多知道也没坏处
参考
https://jingyan.baidu.com/article/046a7b3e617ce7f9c27fa9fb.html
下载WxParse项目
里面wxParse文件夹拷贝到小程序主目录下
--index.js--
var WxParse = require('../../wxParse/wxParse.js');
.
.
Page({
...
...
onLoad: function (options) {
/*
var that = this;
var article = `
<div>我是HTML代码
<img src="http://static.e-mallchina.com/pic/product/brand/detail/hgds.jpg">
</img>
</div>`;
WxParse.wxParse('article', 'html', article, that, 0);
*/
},
...
...
--app.wxss--
@import "/wxParse/wxParse.wxss";
})
--index.wxml--
<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}" />
-->
<!-- 栗子 js 顺序执行 -->
<!--
--app.js--
/* ./pages/wxml/A.js
console.log('a.js')
*/
var a = require('./pages/wxml/A.js')
console.log('app.js')
/* ./pages/wxml/B.js
console.log('b.js')
*/
var b = require('./pages/wxml/B.js')
-->
<!--
执行结果
a.js
app.js
b.js
-->
<!-- 栗子 js 顺序执行 2 -->
<!--
--app.json--
..
"pages": [
"pages/wxml/index",
"pages/index/index",
"pages/logs/logs"
..
--app.js--
console.log('app.js')
--pages/wxml/index.js--
console.log('pages/wxml/index')
--pages/index/index.js--
console.log('pages/index/index')
--pages/logs/log.js--
console.log('pages/logs/logs')
-->
<!--
执行结果 官方文档说按照开发者在 app.json 中定义的 pages 的顺序，逐一执行，可是本地执行的结果是按照首字母排序的（即在pages文件夹下的顺序）
app.js
pages/index/index
pages/log/log
pages/wxml/wxml
-->
<!-- 栗子 作用域 -->
<!--
同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同 NodeJS 更为相似。
在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响，如代码2-36、代码2-37所示。
代码清单2-36 在脚本 /pages/wxml/A.js 中定义局部变量
// A.js
// 定义局部变量
var localValue = 'a'
代码清单2-37 在脚本 /pages/wxml/index.js 中无法访问 A.js 定义的变量
// /pages/wxml/index.js
// 定义局部变量
console.log(localValue) // 触发一个错误 /pages/wxml/index.js中无法访问 A.js 中定义的变量 --localValue is not defined
当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的，如代码2-38、代码2-39所示。
代码清单2-38 在脚本 /pages/logs/logs.js 中设置全局变量
// logs.js
// 获取全局变量
var global = getApp()
global.globalValue = 'globalValue'
代码清单2-39 在脚本 pages/wxml/index.js 中访问/pages/logs/logs.js 定义的全局变量
//pages/wxml/index.js
// 访问全局变量
var global = getApp()
console.log(global.globalValue) // 输出 globalValue
需要注意的是，上述示例只有在 /pages/logs/logs.js 比 pages/wxml/index.js 先执行才有效，
当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置，如代码2-40、代码2-41、代码2-42所示。
代码清单2-40 定义全局变量
// app.js
App({
globalData: {
userInfo: null
}
})
代码清单2-41 获取以及修改 global 变量的方法
// /pages/logs/logs.js
// 局部变量
var localValue = 'a'
// 获取 global 变量
var app = getApp()
// 修改 global 变量
app.globalData.userInfo = 'userInfo' // 执行后 globalData 数值为 2
代码清单2-42 获取 global 变量
// pages/wxml/index.js
// 定义另外的局部变量，并不会影响 /pages/logs/logs.js 中文件变量
var localValue = 'b'
// 如果先执行了 /pages/logs/logs.js 这里的输出应该是 userInfo
console.log(getApp().globalData)
-->
