微信小程序開發小記

年前的時候,由於公司開發小程序的人員不夠,臨時參與了一個項目中幾個小模塊的開發,這裏作個簡單的小記錄,眼過千篇不若手過一遍,但願未來若是要用到時不至於大腦空白!html

開發工具:wechat_devtoolsgit

一,準備工做

1.申請帳號。json

2.安裝開發工具。小程序

二,小程序代碼構成

1.json配置:app.json 是對當前小程序的全局配置,包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。這裏說pages,window,tabBar三個項目中使用到的主要配置項,其他配置可參考小程序配置app.json微信小程序

先貼一個配置代碼:api

{
  "pages": [
    "pages/index/index",
    "pages/info/info",
    "pages/detail/detail",
    "pages/unpay/unpay",
    "pages/history/history",
    "pages/mall/mall",
    "pages/discover/discover"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "紫微斗數",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "測算",
        "iconPath": "images/index_icon1.png",
        "selectedIconPath": "images/index_icon2.png"
      },
      {
        "pagePath": "pages/history/history",
        "text": "個人",
        "iconPath": "images/history_icon1.png",
        "selectedIconPath": "images/history_icon2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "發現",
        "iconPath": "images/discover_icon1.png",
        "selectedIconPath": "images/discover_icon2.png"
      },
      {
        "pagePath": "pages/mall/mall",
        "text": "商城",
        "iconPath": "images/mall_icon1.png",
        "selectedIconPath": "images/mall_icon2.png"
      }
    ],
    "color": "#7C7C7C",
    "selectedColor": "#BA3E3E",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "position": "bottom"
  }
}
  • pages:

    接受一個數組,每一項都是字符串,來指定小程序由哪些頁面組成。每一項表明對應頁面的【路徑+文件名】信息,數組的第一項表明小程序的初始頁面。小程序中新增/減小頁面,都須要對 pages 數組進行修改。數組

    文件名不須要寫文件後綴,由於框架會自動去尋找路徑下 .json.js.wxml.wxss 四個文件進行整合。微信

   例如:「pages/detail/detail」。將對應detail文件夾中的js,json,wxml,wxss四個文件。網絡

    

  • window:用於設置小程序的狀態欄、導航條、標題、窗口背景色。各字段可見名知意。
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "紫微斗數",
        "navigationBarTextStyle": "black"
      },
  • tabBar:

    若是小程序是一個多 tab 應用(客戶端窗口的底部或頂部有 tab 欄能夠切換頁面),能夠經過 tabBar 配置項指定 tab 欄的表現,以及 tab 切換時顯示的對應頁面。app

    Tip:

    1. 當設置 position 爲 top 時,將不會顯示 icon
    2. tabBar 中的 list 是一個數組,只能配置最少2個、最多5個 tab,tab 按數組的順序排序。
    3. List後面的參數用來設置底部導航的樣式,例如字體顏色,選中顏色以及背景色等等。
 "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "測算",
        "iconPath": "images/index_icon1.png",
        "selectedIconPath": "images/index_icon2.png"
      },
      {
        "pagePath": "pages/history/history",
        "text": "個人",
        "iconPath": "images/history_icon1.png",
        "selectedIconPath": "images/history_icon2.png"
      },
      {
        "pagePath": "pages/discover/discover",
        "text": "發現",
        "iconPath": "images/discover_icon1.png",
        "selectedIconPath": "images/discover_icon2.png"
      },
      {
        "pagePath": "pages/mall/mall",
        "text": "商城",
        "iconPath": "images/mall_icon1.png",
        "selectedIconPath": "images/mall_icon2.png"
      }
    ],
    "color": "#7C7C7C",
    "selectedColor": "#BA3E3E",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "position": "bottom"
  }

2.WXML 模板:這就相似於咱們的html標記語言,不過規則略微不一樣,詳情可參考官方文檔 小程序WXML

<!--pages/detail/detail.wxml-->
<view class="body" style="width:{{width}}px;height:{{height}}px;">
  <scroll-view class="main" scroll-y style="width:{{width}}px;height:{{height}}px;">
  <view class="bg-box">
     <image src="../../images/banner.jpg" mode="widthFix"></image> 
    <view class="user-message clear">
      <view class="box">
         <image src="{{userInfo.avatarUrl}}" mode="widthFix" style="border-radius:50%;"></image> 
        <view class="name">姓名:{{orderList.name}}</view>
        <view class="p-box">陽曆 :{{orderList.year}}年{{orderList.month}}月{{orderList.day}}日  {{hours[orderList.hour]}}時</view>
      </view>
    </view>
    
    <view class="info-box">
      <view style="margin-bottom:1rem;color:#7F453A;font-size:0.875rem;font-weight:bold;">您已解鎖下列測算內容,點擊可查看詳情。</view>
        <view class="m-body">
          <view class="ul">
            <block wx:for="{{list}}">
              <view class="li ispay" catchtap='changePage' data-index="{{index+1}}">
                <view class="tit-box">
                  <view class="tit_s">{{item.title}}</view> 
                  <view class="sanjiao">></view>
                </view> 
              </view>
            </block>
          <view style="width:100%;height:20px;"></view>
          </view>
        </view>
    </view>
  </view>
  <view style="height:2.4rem;"></view>
  </scroll-view>
</view>

3.WXSS :WXSS 具備 CSS 大部分的特性,小程序在 WXSS 也作了一些擴充和修改。

  1. 新增了尺寸單位。在寫 CSS 樣式時,開發者須要考慮到手機設備的屏幕會有不一樣的寬度和設備像素比,採用一些技巧來換算一些像素單位。WXSS 在底層支持新的尺寸單位 rpx ,開發者能夠免去換算的煩惱,只要交給小程序底層來換算便可,因爲換算採用的浮點數運算,因此運算結果會和預期結果有一點點誤差。
  2. 提供了全局的樣式和局部樣式。和前邊 app.json, page.json 的概念相同,你能夠寫一個 app.wxss 做爲全局樣式,會做用於當前小程序的全部頁面,局部頁面樣式 page.wxss 僅對當前頁面生效。
  3. 此外 WXSS 僅支持部分 CSS 選擇器

更詳細的文檔能夠參考 WXSS 。

app.wxss中能夠設置全部頁面的樣式,每一個具體樣式文件中,只能設置它對應的文件的樣式。

4.JS交互:微信小程序中,咱們不能直接操做dom,只能在wxml對應的js文件中定義好函數,而後使用某種綁定方式(好比bindtap)綁定到dom元素上,來觸發。

<view>{{ msg }}</view>
<button bindtap="clickMe">點擊我</button>

點擊 button 按鈕的時候,咱們但願把界面上 msg 顯示成 "Hello World",因而咱們在 button 上聲明一個屬性: bindtap ,在 JS 文件裏邊聲明瞭 clickMe 方法來響應此次點擊操做:

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

三,小程序的能力

1.小程序啓動:

微信客戶端在打開小程序以前,會把整個小程序的代碼包下載到本地。緊接着經過 app.json 的 pages 字段就能夠知道你當前小程序的全部頁面路徑,寫在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。

因而微信客戶端就把首頁的代碼裝載進來,經過小程序底層的一些機制,就能夠渲染出這個首頁。

小程序啓動以後,在 app.js 定義的 App 實例的 onLaunch 回調會被執行:

App({
  onLaunch: function () {
    // 小程序啓動以後 觸發
  }
})

整個小程序只有一個 App 實例,是所有頁面共享的,更多的事件回調參考文檔 註冊程序 App 。

2.小程序的頁面:

看看detail.js文件的內容

// pages/detail/detail.js
var app = getApp();
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    data1: 0,
  },
  onLoad: function (options) {
  },
  getInfo:function(sn){
  },
  changePage: function (res) {
    var index = res.currentTarget.dataset.index;
    var sn = this.data.sn
    wx.navigateTo({
      url: '../info/info?index=' + index + "&sn="+sn
    })
  },

  onShareAppMessage: function () {
    return {
    }
  }
})

Page 是一個頁面構造器,這個構造器就生成了一個頁面。在生成頁面的時候,小程序框架會把 data 數據和 index.wxml 一塊兒渲染出最終的結構,因而就獲得了你看到的小程序的樣子。

在渲染完界面以後,頁面實例就會收到一個 onLoad 的回調,你能夠在這個回調處理你的邏輯。全部頁面中須要用到的函數等都要寫在page構造器的內部,而後在合適的時機被調用。

有關於 Page 構造器更多詳細的文檔參考 註冊頁面 Page 。

備註:在傳統的html開發的頁面中,若是沒有作特殊處理,只有當頁面中引用了對應的樣式文件和邏輯交互代碼文件,它們纔會起做用。前面提到過,微信小程序會自動匹配文件,全部只要你的文件名命名規範,全部頁面的樣式及交互文件會自動被引用。

3.組件:小程序提供了豐富的組件能夠供咱們使用,同時咱們也能夠本身自定義符合本身要求的組件。

組件的引用和html中的標籤相似,咱們還可也給組件傳值,例如咱們要顯示地圖,而且在用戶單擊地圖時作出響應代碼能夠以下來書寫:

<map bindmarkertap="markertap" longitude="廣州經度" latitude="廣州緯度"></map>

這個地圖組件的中心將是廣州的經緯度,同時單擊地圖時會觸發綁定的markertap事件。咱們也能夠經過class類名或者style來控制組件的樣式。

更多的組件能夠參考 小程序的組件 。

4.API:爲了讓開發者能夠很方便的調起微信提供的能力,例如獲取用戶信息、微信支付等等,小程序提供了不少 API 給開發者去使用。

須要注意的是:多數 API 的回調都是異步,須要處理好代碼邏輯的異步問題。

 API 能力見 小程序的API 。

四,發佈前的準備

五,上線

四五兩點須要有相應的身份纔可使用,這個具體須要用到時能夠去官網查閱。^_^

相關文章
相關標籤/搜索