微信小程序(一)

前言

因为年前的“跳一跳”彻底将小程序一下子就火起来了，恰好公司又有开发小程序的需求，并将这个项目交给我来开发，接到项目既兴奋又恼火，兴奋的是这是一项提升自己的新技能，恼火的以前写过微信支付，所以对微信的开发文档是特别的无语

正文

准备工作

1、微信Web开发者工具

2、官方API开发文档，推荐看w3cscholl整理的API开发文档

3、微信小程序的 AppID，如果小程序需要支付请以公司名义申请

4、前端ui

项目

创建页面有个小技巧，app.json 中写入”pages/test/test” ,开发工具会自动在Pages下面创建test的页面与目录，前提必须有pages文件夹。

绑定语法

<!--index.wxml-->
<view> {{message}} </view>

// index.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

<!--index.wxml-->
<view wx:for-items="{{array}}"> {{item}} </view>

// index.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})

绑定语法

<!--idnex.wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// index.js
Page({
  data: {
    view: 'MINA'
  }
})

调用事件

<view bindtap="add"> {{count}} </view>
/* bindtap 只是动作事件的其中一个，可根据需求绑定不同的动作*/

Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

页面调用公共JS库方法

index.js

var util = require('../../utils/util.js')
util.upload();

/*util.js*/
function upload(){
}
/*至关重要，否则无法调用方法*/
module.exports={
     upload:upload//要引用的函数 xx:xx
 }

导入公共样式

app.wxss

@import 'style.wxss';

结语

目前本文先写到这里，因为在家里，没有之前写的项目，有些细节也说不到，下一节会将根据实际开发的项目写出来