小程序入门 （1） - 小程序篇

小程序简介

1. 开发文档传送门
2. 起步一个小程序需要做的有
   2.1 先注册账号
   2.2 然后下载开发工具传送门
   2.3 熟悉小程序的开发模式以及代码要求

小程序框架了解

详细内容参考传送门

小程序有内置的框架传送门:

• 页面
• 小程序App
• 自定义组件
• 模块化
• 基础功能

小程序配置

配置分为全局配置和页面配置

• 全局配置：
  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个JSON对象

• 页面配置：
  每一个小程序页面也可以使用.json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象

小程序代码构成

1. JSON配置
2. WXML模板
3. WXSS样式
4. JS 逻辑交互

WXML文件内可以数据绑定，列表渲染，条件渲染，模板，引用。

和Vue语法类似，也有不同

• 数据绑定均来自对应Page的data

// .wxml
<view> {{message}} </view>
// .js
Page({
	data:{
		message: "Hello MINA!"
	}
})

• 列表渲染：
  • wx:for
  • 使用 wx:for-item 可以指定数组当前元素的变量名，
  • 使用 wx:for-index 可以指定数组当前下标的变量名：

// .wxml
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>
// .wxml 也可以嵌套
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>
//js
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})

• 条件渲染
  • wx:if – 1
  • block wx:if – 2
  • wx:if VS hidden – 3

<view wx:if="{{condition}}"> True view>

 
<view wx:if="{{length > 5}}"> 1 view>
<view wx:elif="{{length > 2}}"> 2 view>
<view wx:else> 3 view>

<block wx:if="{{true}}">
  <view> view1 view>
  <view> view2 view>
block>

注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性

// 3
// 因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

// 同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

// 相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

// 一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

• 模板
  • WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
  • 定义 – 1
  • 使用 – 2
  • 作用域 – 3

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} text>
    <text> Time: {{time}} text>
  view>
template>

// 2 使用
// 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如
// .wxml
<template is="msgItem" data="{{...item}}"/>
// .js
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})
// is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
// .wxml
<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'}}"/>
</block>

3 作用域：模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 模块

• 引用
  • import 可以在该文件中使用目标文件定义的template，有作用域的概念。
  • include 可以将目标文件除了外的整个代码引入，相当于是拷贝到include位置。

<template name="A">
  <text> A template text>
template>


<import src="a.wxml"/>
<template name="B">
  <text> B template text>
template>


<import src="b.wxml"/>
<template is="A"/>  
<template is="B"/>

<include src="header.wxml"/>
<view> body view>
<include src="footer.wxml"/>


<view> header view>


<view> footer view>