微信小程序實例代碼

時間 2019-11-12

標籤微信程序實例代碼简体版

原文原文鏈接

http://blog.csdn.net/zuoliangzhu/article/details/53862576#t1php

項目結構html

└─ empty-folder/ ·································· 項目所在目錄
   ├─ pages/ ······································ 頁面目錄
   │  ├─ index/ ··································· index頁面
   │  │  ├─ index.js ······························ index頁面邏輯
   │  │  ├─ index.wxml ···························· index頁面結構
   │  │  └─ index.wxss ···························· index頁面樣式
   │  └─ logs/ ···································· logs頁面
   │     ├─ logs.js ······························· logs頁面邏輯
   │     ├─ logs.wxml ····························· logs頁面結構
   │     └─ logs.wxss ····························· logs頁面樣式
   ├─ utils/ ······································ 公共腳本目錄
   │  └─ util.js ·································· 工具腳本
   ├─ app.js ······································ 應用程序邏輯
   ├─ app.json ···································· 應用程序配置
   └─ app.wxss ···································· 應用程序公共樣式

頁面結構

每一個頁面組件也分爲四個文件組成：前端

[page-name].js

頁面邏輯文件，用於建立頁面對象，以及處理頁面生命週期控制和數據處理git

[page-name].json

設置當前頁面工做時的window的配置，此處會覆蓋app.json中的window設置，也就是說只能夠設置window中設置的屬性github

[page-name].wxml

wxml指的是Wei Xin Markup Language

用於定義頁面中元素結構的，語法遵循XML語法，注意是XML語法，不是HTML語法json

[page-name].wxss

wxml指的是Wei Xin Style Sheet

用於定義頁面樣式的，語法遵循CSS語法，擴展了CSS基本用法和長度單位（主要就是rpx響應式像素）小程序

項目配置

小程序中的配置文件分爲兩種：微信小程序

全局配置文件，根目錄下的app.json
頁面配置文件，每一個頁面目錄下的[page-name].json

app.json

項目配置聲明文件（指定項目的一些信息，好比導航欄樣式顏色等等）api

{
  // 當前程序是由哪些頁面組成的（第一項默認爲初始頁面）
  // 全部使用到的組件或頁面都必須在此體現
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
  "pages": [ ... ],
  // 應用程序窗口設置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
  "window": { ... },
  // 應用導航欄設置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
  "tabBar": { ... },
  // 網絡超時設置
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
  "networkTimeout": {},
  // 是否在控制檯輸出調試信息
  // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
  "debug": true
}

[page-name].json

用於指定特定頁面工做時，window的設置：數組

{
  // 導航條背景色
  "navigationBarBackgroundColor": "#35495e",
  // 導航條前景色（只能是white/black）
  "navigationBarTextStyle": "white",
  // 導航條文本
  "navigationBarTitleText": "電影 « 豆瓣",
  // 窗口背景顏色
  "backgroundColor": "#fff",
  // 窗口前景色
  "backgroundTextStyle": "dark",
  // 是否開啓下拉刷新
  "enablePullDownRefresh": true
}

邏輯層分析

應用程序邏輯`app.js`

app.js做爲項目主入口文件，用於建立應用程序對象

// App函數是一個全局函數，用於建立應用程序對象
App({
  // ========== 全局數據對象（能夠整個應用程序共享） ==========
  globalData: { ... },

  // ========== 應用程序全局方法 ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命週期方法 ==========
  // 應用程序啓動時觸發一次
  onLaunch () { ... },

  // 當應用程序進入前臺顯示狀態時觸發
  onShow () { ... },

  // 當應用程序進入後臺狀態時觸發
  onHide () { ... }
})

也就是說，當應用程序啓動時會自動執行項目目錄下的app.js文件。

在app.js中經過調用全局App([option])方法建立一個應用程序實例。

其中經過參數指定的一些特定的方法，會在特定的執行時機去執行，也就是說一般所說的生命週期事件方法。

屬性	類型	描述	觸發時機
onLaunch	Function	生命週期函數--監聽小程序初始化	當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShow	Function	生命週期函數--監聽小程序顯示	當小程序啓動，或從後臺進入前臺顯示，會觸發 onShow
onHide	Function	生命週期函數--監聽小程序隱藏	當小程序從前臺進入後臺，會觸發 onHide

也能夠定義任意其餘的對象成員（例如：方法和屬性），這些成員能夠在內部直接使用，或者外部經過獲取app對象調用：

屬性	類型	描述
其餘	Any	開發者能夠添加任意的函數或數據到 Object 參數中，用 this 能夠訪問，通常用於存放業務邏輯配置，好比：API地址

app.js

App({
  data1: '123',
  data2: { message: 'hello world' },
  api: {
    list: 'https://github.com/zce/',
    detail: 'https://github.com/zce/',
  },
  foo () {
    return 'bar'
  }
})

other.js　　

// getApp 也是全局函數，能夠在任意地方調用，用於獲取全局應用程序實例對象
var app = getApp()
console.log(app.data1)
console.log(app.data2)
console.log(app.foo())

頁面邏輯`[page-name].js`

[page-name].js是一個頁面的重要組成部分，用於建立頁面對象

// 獲取全局應用程序對象
const app = getApp()

// Page也是一個全局函數，用來建立頁面對象
Page({
  // ========== 頁面數據對象（能夠暴露到視圖中，完成數據綁定） ==========
  data: { ... },

  // ========== 頁面方法（能夠用於抽象一些公共的行爲，例如加載數據，也能夠用於定義事件處理函數） ==========
  method1 (p1, p2) { ... },
  method2 (p1, p2) { ... },

  // ========== 生命週期方法 ==========
  // 頁面加載觸發
  onLoad () { ... }

  ...
})

在應用程序執行到當前頁面時，會執行當前頁面下對應的[page-name].js文件。
在[page-name].js中經過調用全局Page([option])方法建立一個頁面實例。

`Page([option])`方法`[option]`參數說明

屬性	類型	描述
data	Object	頁面的初始數據
onLoad	Function	生命週期函數--監聽頁面加載
onReady	Function	生命週期函數--監聽頁面初次渲染完成
onShow	Function	生命週期函數--監聽頁面顯示
onHide	Function	生命週期函數--監聽頁面隱藏
onUnload	Function	生命週期函數--監聽頁面卸載
onPullDownRefreash	Function	頁面相關事件處理函數--監聽用戶下拉動做
其餘	Any	開發者能夠添加任意的函數或數據到 object 參數中，用 this 能夠訪問

視圖層分析

`[page-name].wxml`頁面結構

WXML（WeiXin Markup Language）是MINA框架設計的一套標籤語言，基於XML。

結合一些基礎組件、事件系統、模板數據綁定，能夠構建出頁面的結構。

簡單來講：wxml ≈ xml + 事件系統 + 模板引擎

例如

// js
Page({
  data: {
    todos: [
      { text: 'JavaScript', completed: false },
      { text: 'JavaScript+', completed: false },
      { text: 'JavaScript++', completed: false }
    ]
  },
  completed (e) { ... }
})

<!-- wxml -->
<view>
  <view wx:for="{{ todos }}">
    <block wx:if="{{ !item.completed }}">
      <text>{{ item.text }}</text>
      <button bindtap="completed" data-item-index="{{ index }}"> √ </button>
    </block>
  </view>
</view>

`[page-name].wxss`頁面樣式

WXSS（WeiXin Style Sheets）是MINA框架設計的一套標籤語言，基於XML。

WXSS用來決定了在WXML中定義的組件應該怎麼顯示。

爲了適應廣大的前端開發者，咱們的WXSS具備CSS大部分特性。同時爲了更適合開發微信小程序，咱們對CSS進行了擴充以及修改。

與CSS相比咱們擴展的特性有：

尺寸單位
樣式導入（CSS也有）

尺寸單位

rpx（responsive pixel）: 能夠根據屏幕寬度進行自適應。規定屏幕寬爲750rpx。如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

rem（root em）: 規定屏幕寬度爲20rem；1rem = (750/20)rpx 。

設備	rpx換算px (屏幕寬度/750)	px換算rpx (750/屏幕寬度)	rem換算rpx (750/20)
iPhone5	1rpx = 0.42px	1px = 2.34rpx	1rem = 37.5rpx
iPhone6	1rpx = 0.5px	1px = 2rpx	1rem = 37.5rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx	1rem = 37.5rpx

建議： 開發微信小程序時設計師能夠用 iPhone6 做爲視覺稿的標準。

注意： 在較小的屏幕上不可避免的會有一些毛刺，請在開發時儘可能避免這種狀況。

樣式導入

使用@import語句能夠導入外聯樣式表，@import後跟須要導入的外聯樣式表的相對路徑，用;表示語句結束。

@import "common.wxss";
text {
  background-color: #ff0;
}

選擇器

目前只支持以下選擇器

選擇器	樣例	樣例描述
.class	.intro	選擇全部擁有 class="intro" 的組件
#id	#firstname	選擇擁有 id="firstname" 的組件
element	view	選擇全部 view 組件
element, element	view	checkbox 選擇全部文檔的 view 組件和全部的 checkbox 組件
::after	view::after	在 view 組件後邊插入內容
::before	view::before	在 view 組件前邊插入內容

全局樣式與局部樣式

定義在app.wxss中的樣式爲全局樣式，做用於每個頁面。在[page-name].wxss文件中定義的樣式爲局部樣式，只做用在對應的頁面，並會覆蓋app.wxss中相同的選擇器。

列表頁實例代碼：

<!--lists.wxml-->
<view class="warp">

<!--文章列表模板 begin-->
<template name="itmes">
  <navigator url="../../pages/detail/detail?id={{id}}" hover-class="navigator-hover">   //跳轉到指定id的頁面
    <view class="imgs"><image src="{{img}}" class="in-img" background-size="cover" model="scaleToFill"></image></view>
    <view class="infos">
      <view class="title">{{title}}</view>
      <view class="date">{{cTime}}</view>
    </view>
  </navigator>
</template>
<!--文章列表模板 end-->

<!--循環輸出列表 begin-->
<view wx:for="{{newsList}}" class="list">
  <template is="itmes" data="{{...item}}" />
</view>
<!--循環輸出列表 end-->
<loading hidden="{{loadHidden}}" bindchange="loadChange">
    數據加載中...
</loading>
<!--bindtap 點擊事件-->
<view bindtap="loadMore" data-lastid="{{lastid}}" data-isfrist="{{isfrist}}" class="loadMore" style="display:{{moreHidden}}">加載更多</view>
<toast hidden="{{toastHidden}}" bindchange="toastChange" duration="3000">{{msg}}</toast>
<modal title="舒適提示" no-cancel hidden="{{confirmHidden}}" confirm-text="明確" bindconfirm="modalChange">你當前不在在WIFI網格下下，會產生流量費用</modal>
</view>

// lists.wxss
.warp{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
}
navigator { overflow: hidden;}

.list {margin-bottom: 20rpx;height: 200rpx;position: relative;}
.imgs {float: left;}
.imgs image {display: block; width: 200rpx;height: 200rpx;}

.infos {float: left; width: 480rpx; height: 200rpx;padding: 20rpx 0 0 20rpx;}
.title {font-size: 20px;}
.date {font-size: 16px;color: #aaa; position: absolute;bottom: 0;}

.loadMore {text-align: center;margin: 30px;color: #aaa;font-size: 16px}

//lists.js //獲取應用實例
var app = getApp()
Page({
  data: {
    newsList: [],
    lastid:0,
    toastHidden:true,
    confirmHidden:true,
    isfrist:1,
    loadHidden:true,
    moreHidden:'none',
    msg:'沒有更多文章了'
  },
  loadData: function (lastid){     //點擊事件函數
    //顯示出加載中的提示
    this.setData({loadHidden:false})

      var limit = 5
      var that = this

      wx.request({
          url: 'http://localhost/weicms/index.php?s=/addon/Cms/Cms/getList',
          data: {lastid:lastid,limit:limit},
          header: {
              'Content-Type': 'application/json'
          },
          success: function(res) {
               if(!res.data){
                    that.setData({ toastHidden:false }) 
                    that.setData({ moreHidden:'none' })
                    return false                
               }
                var len = res.data.length
                var oldLastid = lastid
                that.setData({ lastid: res.data[len-1].id})

                var dataArr = that.data.newsList
                var newData = dataArr.concat(res.data);

                if(oldLastid==0){
                     wx.setStorageSync('CmsList', newData)
                }
                that.setData({ newsList:newData }) //列表循環的數組
                that.setData({ moreHidden:'' })
                console.log('data from url');
          },
          fail: function(res){
                 if(lastid==0){
                     var newData = wx.getStorageSync('CmsList')
                     if(!newData){
                        that.setData({ newsList:newData })
                        that.setData({ moreHidden:'' })

                          var len = newData.length
                          that.setData({ lastid: newData[len-1].id})
                     }
                     console.log('data from cache');
                } else {
                    that.setData({ toastHidden:false, moreHidden:'none', msg:'當前網格異常，請稍後再試' }) 
                }          
          },
          complete: function(){
             //顯示出加載中的提示
              that.setData({loadHidden:true})         
          }
      })
  },
  loadMore: function(event){
    var id = event.currentTarget.dataset.lastid
    var isfrist = event.currentTarget.dataset.isfrist
    var that = this

    wx.getNetworkType({
      success: function(res) {
        var networkType = res.networkType // 返回網絡類型2g，3g，4g，wifi

        if(networkType!='wifi' && isfrist=='1'){
           that.setData({confirmHidden:false})
        }
      }
    })

    this.setData({isfrist:0})
    this.loadData(id);
  },
  onLoad: function () {
    var that = this

    this.loadData(0);
  },

  toastChange: function(){
    this.setData({toastHidden:true})
  },
  modalChange: function(){
    console.log('abc');
    this.setData({confirmHidden:true})
  }
})

詳情頁實例代碼：