微信小程序简单入门

为了业务流水，公司也开始做一些小程序/小游戏的项目。因为要的急切，赶鸭子上架学习了一下，简单记录一下小程序新的体会。总的来说小程序的开发难度不算特别大，熟悉了样式文件和布局之后，还是能弄个像样的小程序出来。

小程序结构

小程序的文件结构总提来说分为页面，组件，资源，和工具类等等。设计时每个页面的显示只能从当前页面对应的数据块刷新显示。

每个页面/组件包含4个文件，分别对应代码逻辑、配置、显示以及样式文件。小程序的基础组件的使用参考官方文档

小程序基本使用

• 小程序下方导航栏，TabBar在app.json文件中配置，微信官方TabBar组件支持2~5个页签栏

  "tabBar": {
    "color": "#696969",
    "selectedColor": "#696969",
    "borderStyle": "white",
    "backgroundColor": "#f7f7fa",
    "list": [
      {
        "pagePath": "pages/Home/Home",
        "text": "首页",
        "iconPath": "images/home/home.png",
        "selectedIconPath": "images/home/home_selected.png"
      },
      {
        "pagePath": "pages/order/order",
        "iconPath": "images/home/order.png",
        "selectedIconPath": "images/home/order_selected.png",
        "text": "订单"
      },
      {
        "pagePath":  "pages/userinfo/userinfo",
        "iconPath": "images/home/user.png",
        "selectedIconPath": "images/home/user_selected.png",
        "text": "个人"
      }
    ]
  },

配置中，list存储了每个页签的信息，包括页面路径，名称、默认图标和选中图标

开发中注意，如果是常规的页面切换调用微信提供wx.navigateTo即可，但是如果是TabBar的页面，代码调用页面切换需要调用wx.switchTab才行

• 数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以在wxml中刷新显示数据

Page({
  data: {
    message: 'Hello World!'
    list:[1,2,3,4,5]
  }
})

<view> {{ message }} </view>

wxml中要渲染的数据需要在JS中通过setData方法来设置最新的数据，否则页面刷新无效。

this.setData({
      message: "小程序简易入门"
      //修改数组list[3]的值修改为10
      ["list[3]"]:10
    })

• 小程序组件
  小程序的组件功能一般存放在components下，和普通的页面一样对应着4个文件，但是小程序组件中除了data数据块还有properties组件的属性列表，这样组件在使用时就可以直接传入一些参数。例如设计一个自定义的button组件：
  JS文件如下：

// components/buttons/mybutton.js
Component({
  options: {
   multipleSlots: true 
  },
  /**
 - 组件的属性列表
   */
  
  properties: {
    src:{
      type:String,
      value:"/images/order/btn_n.png"
    },
    clickSrc:{
      type:String,
      value:null
    },
    hidden:{
      type:Boolean,
      value:false
    },
    disable:{
      type:Boolean,
      value:false
    },
    disableSrc:{
      type:String,
      value:"/images/order/btn_un.png"
    },
    width:{
      type:String,
      value:"38.7vw"
    },
    height:{
      type:String,
      value:"12vw"
    },
    font_size:{
      type:String,
      value:"32rpx"
    },
    index:{
      type:String,
      value:null
    },
    parameter:{
      type:Object,
      value:null
    }
  },

  /**
 - 组件的初始数据
   */
  data: {
    isSure:true
  },
  /**
 - 组件的方法列表
   */
  methods: {

    onClickStart:function()
    {

      if(this.data.clickSrc)
      {
        var src=this.data.src;
        this.setData({
          oldSrc:src,
          src:this.data.clickSrc
        })
      }
    },

    onClickEnd:function()
    {
      if(this.data.clickSrc)
      {
        this.setData({
          src:this.data.oldSrc
        })
      }
    },

    onClick:function(){
    //在外部可以通过bind:onClick 将点击事件绑定至使用组件的页面进行处理
      this.triggerEvent("onClick",{
        index:this.data.index,
        parameter:this.data.parameter
      })
    }

  }
})

wxml文件：

<!--components/buttons/mybutton.wxml-->
<view wx:if="{{disable==true}}" hidden="{{hidden}}" class="btn" style=" width: {{width}};height: {{height}};">
  <image style=" width: {{width}};height: {{height}};"  src="{{disableSrc}}"></image>
  <view  class="btn_text" style=" width: {{width}};height: {{height}}; position: relative;bottom: {{height}};">
      <slot></slot>
  </view>
</view>
<view wx:else hidden="{{hidden}}" bindtouchstart="onClickStart" bindtouchend="onClickEnd"  bindtap="onClick" class="btn" hover-class="btn_click" hover-start-time="0" hover-stay-time="100" style=" width: {{width}};height: {{height}};">
  <image style=" width: {{width}};height: {{height}};"  src="{{src}}"></image>
  <view  class="btn_text" style=" width: {{width}};height: {{height}}; position: relative;bottom: {{height}};">
      <slot></slot>
  </view>
</view> 

组件在使用时需要在在对应页面/组件的json配置文件中说明使用组件的信息（如果是通用的可以写在app.json全局配置文件中）

      <mybutton id="addButton" disable="{{timeOut}}" bind:onClick="onActiveCard" index="测试ID"  clickSrc="/images/order/btn_c.png">
         <text style="color:white;font-size:40rpx">激        活</text>
      </mybutton>

在js文件中this.button = this.selectComponent("#addButton");使用selectComponent可以获取到对应的组件，并调用组件中的方法。组件中的按钮事件也可以通过bind 方式回传至页面。

• 小程序简单动画：以下是一个位移动画的代码

      var animation=wx.createAnimation({
        delay: 0,
        timingFunction:"linear",
        duration:50
      })
      this.animation=animation;
      animation.translateY(this.data.height).step();
      this.setData({
        animationData:animation.export(),
        isPlayAnimation:true
      })
      setTimeout(function (){
        this.setData({
          isShow:true
        })
      }.bind(this), 50);
      
      animation.duration=200
      setTimeout(function() {
        animation.translateY(0).step()
        this.setData({
          animationData: animation.export(),
          isPlayAnimation:false
        })
      }.bind(this), 100)