微信小程序入門到實戰(一)

瞭解小程序

  • 什麼是小程序?

小程序其實就是一個工具,爲人提供便捷服務的;隨時可用,用完即走,減小桌面上面的app數量;html

B2C(人與商品) 淘寶 JD
P2P(人與人)微信 QQ
C2P(人與服務)微信小程序 支付寶小程序
  • 什麼應用適合小程序?

對於一些性能要求不高,使用頻度不高,業務邏輯簡單的應用適合作成一個小程序的應用;好比購票,繳費,手機充值等json

小程序的文件結構

一個小程序首先有四個應用入口文件:小程序

  • app.js:設置一些項目的全局變量
  • app.json:每個新頁面都必須在這個地方註冊,項目的導航欄和窗口界面設置有關的
  • app.wxss:項目全局樣式
  • project.config.json:項目配置文件

一個頁面主要是包含如下四個文件,這四個文件的名字應該都是同樣的,最好以頁面所在的文件夾名字爲標準:微信小程序

    • xxx.wxml:頁面的結構
    • xxx.wxss:頁面的樣式
    • xxx.json:頁面的配置文件
    • xxx.js:頁面的腳本文件

      頁面能夠嵌套頁面,可是建議不要超過5個層級。api

    移動設備的分辨率與RPX

    小程序推薦使用 rpx爲單位,這樣就能夠在任意屏幕下面實現自適應

    小程序是移動端的開發,因此要注意像素的使用。
    移動設備分辨率數組

    • pt:視覺單位(長度單位),與設備的屏幕物理尺寸有關係,也叫作邏輯分辨率(邏輯單位),與移動端的柵格渲染有關
    • px:一般說的像素點,物理分辨率,隨着屏幕的變化不會變化;通常設計師給的設計稿是以物理分辨率爲單位的,也就是說,iPhone6下的分辨率是375,可是設計圖倒是750;由於rpxpx == 2:1,小程序的設計稿就要以iPhone6爲參照。

    ptpx之間的關係:1個pt下面包含多個px;也就是說一個邏輯分辨率包含多個物理像素點。
    ppI(DPI):計算的是屏幕顯示1個邏輯分辨率包含多個物理像素點,值越大,顯示的圖像越細膩,清晰。計算的方法是:320*320+480*480的和開根號再處於屏幕尺寸最後乘以reader值
    reader值:視網膜屏,表示一個邏輯像素點包含多個(reader值)物理像素點,通常reader值爲2就達到了眼睛的所能觀察到細膩的極限,再大幾乎不怎麼起做用,對於眼睛感受到的色彩來講。服務器

    也就是說,當須要的元素大小適應屏幕尺寸,就選擇rpx做爲單位,否者使用px做爲單位。微信

    第一個小程序頁面

    • 新建一個項目,選擇無AppID ,保存

    新建項目

    • 新建一個頁面

    新建頁面

    咱們能夠直接在項目的app.json中的pages屬性下面按照此方式建立頁面,保存,就能夠在左邊看到一個以welcom名字的文件夾,包含了頁面所須要的四種文件,省略手動在app.js裏面註冊,而且裏面都已經自動配置好了一些設置,防止出現下面的錯誤:
    頁面js文件未調用page()方法app

    解決辦法就是在相對應的頁面js空文件中調用一下page({...})方法,至關於註冊一下,註冊的時候只須要寫頁面的名字,不須要區別是那種頁面類型。全部該頁面的方法都在page({...})方法裏面執行xss

    app.jsonpages這個屬性裏面的數組元素,誰出如今第一個位置,就是小程序的啓動頁面。
    json類型的文件裏面不能寫註釋,否者會報文件解析錯誤。
    json文件註釋報錯

    小程序裏面使用view標籤做爲容器,分割文檔的做用,相似於在html中使用的div

    text標籤是一個文本標籤,只有當文字被這個標籤包裹起來的時候,才能在手機上面長按選中,這個標籤支持轉義字符的解析。

    編寫wxml代碼

    <view class='container'>
      <image class='user-avatar' src='/images/1.png'></image>
      <text class='user-name'>icessun</text>
      <view class='moto-container' bindtap='tapName'>
        <text class='moto'>開啓小程序大門</text>
      </view>
    </view>

    其實在wxml中編寫頁面骨架的時候,注意小程序默認在咱們編寫的骨架外面包裹了一個page標籤,能夠經過這個標籤來設置整屏的顏色。
    最外層page標籤

    在小程序裏面呢,通常都使用flex佈局,彈性盒子模型

    display: flex;
      flex-direction: column;
      align-items: center;

    這樣第一個小程序頁面咱們就編寫好了,保存運行一下,就能夠看到效果,前提是把這個頁面設置爲啓動頁,由於咱們尚未寫頁面跳轉。
    第一個小程序頁面效果

    頁面周期函數

    在上面新建頁面的時候,咱們發如今js文件裏面會自動在page()方法中生成一些方法,以下:
    頁面周期函數

    通常頁面啓動,會首先調用這三個函數:onLoad(頁面加載,一個頁面只會調用一次)----->onShow(頁面顯示,頁面每次打開都會調用)----->onReady(頁面完成初次渲染)

    page()函數中的data:{ }屬性,一般是保存頁面須要綁定的數據,通常在裏面設置一個變量,用來接收從服務器加載來的JSON數據,而後在經過數據綁定的方式綁定到頁面上面。

    page周期函數圖

    app.js的生命週期

    app.js是關於整個小程序項目的方法和屬性,相似頁面Page({...})函數,也須要一個外層函數包裹App({ ...})

    App({
      //當小程序初始化完成時,會觸發 onLaunch(全局只觸發一次)
      onLaunch: function () {
    
      },
      // 當小程序啓動,或從後臺進入前臺顯示,會觸發 onShow
      onShow: function (options) {
    
      },
      //當小程序從前臺進入後臺,會觸發 onHide
      onHide: function () {
    
      },
      // 當小程序發生腳本錯誤,或者 api 調用失敗時,會觸發 onError 並帶上錯誤信息
      onError: function (msg) {
    
      }
    })
     // 應用程序的全局變量
      globalData: {
        g_isPlaying: false,
        //  記錄當前頁面是否播放
        g_currentMusicPost: null,
        //  電影api地址
        doubanBase: 'https://api.douban.com'
      }

    固然也能夠在裏面設置一些全局的變量,而後在其餘頁面對應的js文件中經過下面的方式來獲取到裏面定義的全局變量。

    var app = getApp();  
    var globalData = app.globalData
    相關文章
    相關標籤/搜索