微信小程序开发

小程序

开发小程序第一步是先申请一个小程序账号（一个邮箱只能申请一个）。
下载微信开发者工具，扫码登录。

配置

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

配置项：
Pages用于指定小程序由哪些页面组成，文件不需要写文件后缀
小程序中新增/减少页面，都需要对pages数组进行修改

"pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],

Window用于设置小程序的状态栏、导航条、标题、窗口背景色等

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },

tabBar（tab栏的切换效果）可以通过tabBar配置项指定tab栏的表现，以及切换显示对应的页面

"tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/icons/home.png",
        "selectedIconPath": "/icons/home-o.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/icons/category.png",
        "selectedIconPath": "/icons/category-o.png"
      }
    ]
  },

更多内容见官网

路由跳转

• wx.switchTap:跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
• wx.navigateTo:保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
• wx.redirectTo:关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
• wx.reLaunch:关闭所有页面，打开到应用内的某个页面

小程序代码构成

当我们新建一个文件夹时，文件构成有：

• .json 页面配置
• .wxml 页面结构
• .wxss 页面样式表
• .js 页面逻辑

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input中的输入内容，switch的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
如不提供wx:key，会报一个warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

条件渲染 wx:if

在框架中，使用** wx:if=" "** 来判断是否需要渲染该代码块

<!-- 条件渲染 -- wx：if 值为true显示内容，为false隐藏内容 -->
<view wx:if="{{true}}">我要变好看，要变好看</view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块

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

block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

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