前言

最近公司要調(diào)研一下微信小程序，說(shuō)是做技術(shù)積累。

可我是一個(gè)iOS開(kāi)發(fā)者，硬著頭皮來(lái)吧，整理一下兩周的調(diào)研結(jié)果

1，初始配置

• 測(cè)試程序一般申請(qǐng)測(cè)試號(hào)即可，就是一個(gè)wxAppId。
• 然后基礎(chǔ)的架構(gòu)開(kāi)發(fā)工具會(huì)自動(dòng)搭建完成。

2，項(xiàng)目架構(gòu)說(shuō)明

一個(gè)Project小程序架構(gòu)包含如下：

• peoject.config.json：配置文件，基本可以無(wú)視
• 然后就是類似html的三大塊：js、json、wxml、wxss
• js : 腳本文件
• json：頁(yè)面配置文件
• wxml：頁(yè)面布局文件
• wxss：頁(yè)面樣式文件

3，app模塊

• 從架構(gòu)來(lái)看，app.js類似于iOS的AppDelegate文件，里面有基本的Onlaunch函數(shù)等同于iOS的didFinishLaunchingWithOptions方法。

• 在app.json文件自動(dòng)注冊(cè)頁(yè)面路徑、設(shè)置window樣式、以及配置tabBar等路由頁(yè)面

• 在app.wxss配置全局的styles，如果你用weui框架，可以導(dǎo)入style/weui.wxss

代碼如下：

App({
  onLaunch: function () {
    // 展示本地存儲(chǔ)能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登錄
    wx.login({
      success: res => {
        console.log("login success")
        // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
      }
    })
})
// 這些為默認(rèn)設(shè)置

{
  "pages": [
  // 默認(rèn)會(huì)自動(dòng)添加
  ],
  "window": {
    "backgroundTextStyle": "light",
  },
  "tabBar": {
    "color": "#6e6d6b",
    "selectedColor": "#FF5A4B",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "",
        "selectedIconPath": "",
        "text": ""
      }
    ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

/**app.wxss**/
@import 'style/weui.wxss';

page{
    background-color: #EDEDED;
    font-size: 16px;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}

4，頁(yè)面模塊

說(shuō)起頁(yè)面首先要說(shuō)到框架，我用的是weui，當(dāng)然也可以用別的，只不過(guò)weui風(fēng)格和iOS更加貼近而已，

weui已經(jīng)封裝好的組件cell、cells、Actionsheet等，不用這些的話也可以用weui-wxss寫(xiě)

1）基礎(chǔ)UI頁(yè)面構(gòu)建

使用組件在index.json里配置

{
  "usingComponents": {
    "billView":"../components/mine_bill",
    "cardType":"../components/cardType",
    "colorBtn":"../components/colorBtn",
    "mineLimit":"../components/limit_info",
    "cardView":"../components/card/card"
  },
  "navigationBarTitleText":"標(biāo)題"
}

同時(shí)在index.wxml里面使用

<view class="page">
  <!-- 頭部視圖 -->
  <view class="page_hd">
    <cardView></cardView>
  </view>

   <view class="page_bd page_tqhk">
       <view style="font-size:15px; font-weight:600"> 下月待還(元):1252.0</view>
       <colorBtn title = "提前還款" bindtap="goToMineBill"></colorBtn>
    </view>

  <view class="page_bd">
    <!-- 我的賬單 -->
    <scroll-view class="weui-scrollview mine_order"  scroll-x="{{true}}"scroll-with-animation="{{true}}" >
        <billView class="item" 
                  title="我的賬單" 
                  color="#EFFAFF" 
                  subTitle="還款日" 
                  bind:btnAction="gotoSee" 
                  bind:billAction="goToMineBill"/>
    </scroll-view>

    <!-- 我的額度 -->
    
    <view class="mine_limit">
      <view class="mine_limit_title" style="font-size:16rpx:font-weight:700">我的額度       </view>
      <mineLimit></mineLimit>
    </view>
    
    <!-- 立即綁卡 -->
    <view class="mine_limit">
      <view style="font-size:16rpx:font-weight:700">立即綁卡</view>
      <view class="bindcard_content">
        <cardType class="card_type" title="微信"></cardType>
        <cardType class="card_type" title="支付寶"></cardType>
        <cardType class="card_type" title="手機(jī)錢(qián)包"></cardType>
      </view>
    </view>
  </view>
</view>

index.wxss里面就不說(shuō)了，和其他的css合適沒(méi)有區(qū)別

2）頁(yè)面交互

以index.js為例

 gotoSee:function(){
    wx.showToast({
      title: '去看看',
      icon: 'success',
      duration: 3000
  })
  },
  goToMineBill:function(){
    wx.navigateTo({
      url:"../repayment/repayment"
    })
  },

在index.wxml里面bind

<billView class="item" 
                  title="設(shè)置分期" 
                  color="#FFF8EE" 
                  btnTitle="去設(shè)置" 
                  subTitle="不分期" 
                  bind:btnAction="gotoSee" 
                  bindtap="goToMineBill"></billView>

3）組件的構(gòu)建

組件的構(gòu)建中，wxml文件是基本相同的，js文件有部分差異

Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    title:String,
    subTitle:String,
    btnTitle:String,
    showBill:{
      type:Boolean,
      value: true
    },
    color:String
  },
  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
  },
  /**
   * 組件的方法列表
   */
  methods: {
    _btnAction(){
      this.triggerEvent("btnAction");
    },
    _billAction(){
      this.triggerEvent("billAction");
    }
  }
})

在wxml中bind方法和屬性賦值

<view class="container" style="background:{{color}}">
    <view style="font-size:13px; font-weight:500;margin-top:8rpx">{{title}}</view>
    <block wx:if="{{showBill}}" >
         <view style="font-size:10px; color:#999999;margin:8rpx 0rpx" catchtap='_billAction'>{{subTitle}}</view>
    </block>
    <view class="btn" catchtap='_btnAction'>{{btnTitle?btnTitle:"去看看"}}>></view>
</view>

其中，<block>無(wú)任何意義，只是表示一個(gè)塊結(jié)構(gòu)。

4）傳值的問(wèn)題

第一步：首先在wxml中的bind中賦值data-property，例如bind:tap="goToDetail" data-obj="{{item}}"

在js文件中goDetailfunction中

 goToDetail:function(e){
    if (e.currentTarget.dataset.obj) {
      let a = e.currentTarget.dataset.obj;
      let b = {"name":a.title,"time":a.created_name,"content":a.content};
      wx.navigateTo({
        url:"../home/detail?obj=" + JSON.stringify(b)
      })
    }
  },

第二步：第二個(gè)頁(yè)面收取傳值為

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad: function (options) {
    if (options.obj) {
      this.setData({
        obj:JSON.parse(options.obj)
      })
    }
  },

或者

利用localStorage對(duì)數(shù)據(jù)進(jìn)行傳遞，這個(gè)不多說(shuō)。

5，總結(jié)

• html基礎(chǔ)要有，不然頁(yè)面都難布局
• js語(yǔ)法熟悉，頁(yè)面交互和邏輯都需要