微信小程序實戰教程——1.基礎知識

時間  2019-11-08
標籤 微信 程序 實戰 教程 基礎 知識 简体版
原文   原文鏈接

完整教程請查看 微信小程序實戰教程css

微信小程序實戰教程——2實戰之模仿知乎 傳送門html

1 準備工做

微信小程序的語法與vueJS相似，沒學過vueJS的同窗儘可能先過一遍vue再看本教程。vue

首先在微信平臺中註冊一個帳號得到開發者AppID，以下載微信小程序的開發者工具，安裝完畢後打開開發者工具建立一個項目，將項目名稱位置AppID填入便可。git

2 文件目錄及每一個文件的功能

微信小程序的文件有四類，分別是.wxml文件，.wxss文件，.js文件，.json文件。 其中.wxml對應.html文件，.wxss文件對應.css文件，.json文件是配置文件。

pages文件夾中每個文件夾表明一個頁面，新建的項目有兩個頁面，分別四index和logs頁面，每一個頁面包含一個.js文件，一個.wxml文件，一個.wxss文件以及一個.json文件。四類文件的做用稍後會講到。github

utils文件存放的是工具類，這個文件夾是非必須的，能夠直接刪掉。json

project.config.json與sitemap.json初學者能夠暫時不理會。小程序

2.1 .wxml文件

.wxml文件相似咱們寫的.html文件，但標籤上有些不一樣。微信小程序

使用<view></view>標籤代替<div></div>，使用<image></image>代替<img/>，使用<block></block>標籤代替<template></template>，引入<text></text>標籤等等，後續作項目的時候會了解到更多標籤。數組

<!--新建項目的index.wxml文件-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>
複製代碼

2.2 .wxss文件

.wxss文件就是.css文件。在app.wxss中控制全局樣式，在pages文件夾中的頁面文件的.wxss文件中控制局部樣式。局部樣式的優先級大於全局樣式。bash

微信小程序推薦的佈局方式是彈性佈局（彈性佈局快速入門點這裏）,使用彈性佈局能夠很快速的搭建咱們的項目。

微信小程序爲了適配多種不一樣屏幕大小的設備，採起了一種的響應式單位rpx，使用rpx單位就好像使用百分比做爲單位同樣實現響應式佈局。rpx是一種相對大小，咱們使用iphone6的機型時，1px=2rpx，iphone6的大小爲375px*667px，對於的rpx爲750rpx*1334rpx。關於rpx的更多瞭解見wxss.html#尺寸單位

2.3 .json文件

.json文件是項目的配置文件

//-新建項目的app.json文件
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}
複製代碼

pages是存放全部頁面的數組,每個使用到的頁面都須要寫入pages內，不須要寫文件後綴，window屬性配置的是狀態欄的樣式，如navigationBarBackgroundColor用於設置背景色，navigationBarTitleText設置狀態欄顯示的文本，navigationBarTextStyle設置狀態欄文本的顏色，只能傳入black/white，除此以外還能夠配置底部導航欄tabBar等等。

app.json文件進行全局配置，每一個頁面文件夾下還有一個.json文件用於局部配置，局部配置只能配置window屬性

//局部配置.json文件,這裏的配置會覆蓋app.json中的window屬性
{
  "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
}
複製代碼

注意事項

  • 必須用一對大括號將屬性包圍起來，寫成json字符串的格式。
  • 屬性名必須用雙引號包圍起來.
  • .json文件中不能夠寫註釋。

2.4.js文件

小程序的生命週期分爲應用聲明週期和頁面生命週期，應用聲明周期函數在app.js中定義，且在小程序運行過程當中一直存在內存中處於運行狀態，在這裏能夠定義應用聲明周期函數以及定義全局變量。每一個頁面中的.js文件中則能夠定義頁面聲明周期函數等，語法相似vueJS。

小程序爲了提升性能，是不容許開發者操做DOM元素的。

//新建項目的app.js文件，經過App方法聲明
App({
  onLaunch: function () {
   //頁面渲染前執行
  },
  globalData: {
    //定義全局變量
    userInfo: null  
  }
});
//頁面的.js文件，經過Page方法聲明
Page({
    
});
複製代碼

3 指令

小程序中經常使用的指令有wx:for、wx:if、wx:elif、wx:else等。

//wxml
<view>
    <text wx:if="count>0">{{count}}</text>
    <text wx:elif="count<0">{{count}}</text>
    <text wx:else>{{count}}</text>
</view>
//js
data() {
    return {
        count:0
    }
}
複製代碼

wx:if、wx:elif、wx:else的邏輯等同於if else。

//wxml
<view>
    <text wx:for="arr" wx:for-item="value" wx:for-index="index">
        {{index}}.{{value}}
    </text>
</view>
//js
data() {
    return {
        arr:[
            '小明',
            '小紅',
            '李雷'
        ]
    }
}
輸出===>
<view>
    <text>1.小明</text>
    <text>2.小紅</text>
    <text>3.李雷</text>
</view>
複製代碼

wx:for即循環生成標籤。

4 事件

小程序中不使用click事件，而用tab（觸摸）事件代替，事件的前綴有兩種分別是bind和catch，bind:tab表示冒泡事件，即事件觸發後繼續冒泡觸發後續事件，catch:tab表示非冒泡事件，即事件觸發後再也不冒泡，相似執行了event.stopPropagation()方法。

//實現一個點擊加一的計數器
//wxml
<view>
    <text bind:tab="addNumber">{{count}}</text>
</view>
//js
Component({
    //調用組件傳來的變量
    properties:{
    },
    //內部變量
    data() {
        return {
            count:0
        }
    },
    //內部方法
    methods:{
        //點擊加一
        addNumber() {
            this.setData({
               count:count+1 
            });
        }
    }
});
複製代碼

改變data中的屬性值必須使用this.setData()方法，傳入一個對象，對象中存放須要改變的屬性鍵值對。

bind:tab能夠簡寫爲bindtb，我的喜歡bind:tab，看起來更清晰

5 組件

對於一個js文件，函數就是一個最小的、可複用的代碼片斷。而組件就是對於一個項目最小的、可複用的代碼片斷，他包括html、css、js代碼，如咱們常見的頁面導航欄就能夠作成一個組件，經過組件名字來使用，而不用將導航欄的代碼複製粘貼到每一個頁面中。

5.1組件的使用

小程序的組件經過Component方法聲明

//.js文件
Component({
    properties:{
        //接收外接傳來的變量
    },
    data() {
        return {
            //組件內部的變量
        }
    },
    methods:{
        //組件內部的方法
    }
});
複製代碼

聲明完畢以後，在須要使用到該組件的頁面中進行調用

//使用組件的頁面的.json文件
{
    "usingComponents":{
        //由鍵值對組成，鍵表示組件的名字，值是組件的路徑，也是不須要文件後綴
        "component-name":"/components/component/index"
    }
}
//使用組件的頁面的.wxml文件
<view>
    <component-name />  <!--不須要傳入properties-->
    <component-name userName="小明"/>  <!--傳入properties-->
</view>
複製代碼

5.2父子組件的傳值

首先咱們看一下使用組件內部變量的例子，咱們定義了userName變量並把它渲染到頁面當中。

//component .wxml文件
<view>
    <text>Hello {{userName}},how are you?</text>
</view>
//component .js文件
Component({
    properties:{
        //接口外接傳來的變量
    },
    data() {
        return {
            userName:"李雷"
        }
    }
});
複製代碼

5.2.1父組件向子組件傳值

接着咱們接受一個外部的變量並把它渲染到頁面上，這樣就實現了父組件向子組件傳值。

//component .wxml文件
<view>
    <text>Hello {{userName}},how are you?</text>
</view>
//component .js文件
Component({
    properties:{
        userName:{
            type:String,    //調用該組件時傳入的值的類型，能夠是Number、String、Boolean、Object、Aray、Null(任意類型)
            value:"李雷"    //默認值，調用該組件時未傳入userName時，則userName的值爲預設值李雷
        }
    },
    data() {
        return {
            //組件內部變量
        }
    }
});
複製代碼

5.2.2子組件向父組件傳值

子組件向父組件傳值的思路通常都是父組件監聽一個自定義的事件，子組件觸發這個事件同時將值傳入，父組件監聽這個事件的時候就能夠拿到子組件傳過來的值。

//component .wxml文件
<view>
    <text bind:tap="clickMe">Hello world</text>
</view>
//component .js文件
Component({
    properties:{
        //接口外接傳來的變量
    },
    data() {
        return {
            //組件內部變量
        }
    }，
    methods:{
        //用戶點擊Hello world的時候向父組件傳值
        clickMe() {
            //第一個參數爲自定義事件名，父組件須要監聽這個事件，第二個參數爲須要傳的值
            this.triggerEvent('clickMe',{msg:'Hello world'});
        }
    }
});
//parent.wxml
<!--監聽clickMe事件-->
<component bind:clickMe="clickMe"></component>
//parent.js
clickMe(event) {
    console.log(event.detail.msg);//輸出子組件傳來的參數Hello world，子組件傳來的參數都在event.deail中
}
複製代碼

5.3注意事項

前面咱們說到了能夠在app.wxss中定義全局樣式，每一個page頁面均可以繼承全局樣式。但組件不一樣，組件只能繼承有關字體以及color的樣式，其餘全局樣式不能影響到組件的樣式。

6 生命週期

小程序的聲明週期分爲整個應用的聲明週期以及單個頁面的聲明週期，對於初學者來講這部份內容能夠先跳過，它就像一幅眼鏡，你天然會知道何時須要。

6.1 應用生命週期回調函數

在app.js中調用的App函數中，能夠設置應用聲明週期的回調函數

App({
  onLaunch (options) {
    //初始化完成後執行
  },
  onShow (options) {
    //進入小程序後執行
  },
  onHide () {
    //離開小程序後執行，注意不是銷燬，如切換其餘App時，微信處於後臺中，這時調用onHide
  },
  onError (msg) {
    //小程序出錯時執行
  }
});
複製代碼

6.2 頁面的生命週期回調函數

Page({
  onLoad: function(options) {
    //頁面初始化後執行
  },
  onReady: function() {
    //初次渲染結束執行
  },
  onShow: function() {
    //進入頁面執行
  },
  onHide: function() {
//頁面隱藏/切入後臺時觸發，如 wx.navigateTo 或底部 tab 切換到其餘頁面，小程序切入後臺等  
  },
  onUnload: function() {
    //頁面卸載時觸發。如wx.redirectTo或wx.navigateBack到其餘頁面時。
  },
  onPullDownRefresh: function() {
    // Do something when pull down.監聽下拉刷新事件,必須開啓enablePullDownRefresh
  },
  onReachBottom: function() {
    // Do something when page reach bottom. 監聽用戶上拉觸底事件
  },
  onShareAppMessage: function () {
    // return custom share data when user share.點擊轉發按鈕
  },
  onPageScroll: function() {
    // Do something when page scroll 頁面滾動事件
  },
  onResize: function() {
    // Do something when page resize旋轉屏幕觸發
  },
  onTabItemTap(item) {
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

複製代碼

6.3 組件生命週期回調函數

Component({
  lifetimes: {
	created:function() {
		//組件實例化的時候執行，此時不能調用setData()
	}
    attached: function() {
      // 在組件實例進入頁面節點樹時執行
    },
    detached: function() {
      // 在組件實例被從頁面節點樹移除時執行
    },
  },
});
複製代碼

7零碎知識點

7.1<image>

<image>標籤中，無論圖片多大，默認的圖片大小寬度爲300px,高度爲225px，因此必定要給圖片設置寬高。

7.2頁面最外層元素

html頁面中最外層的元素爲<html>，小程序中的最外層元素爲<page>，且<page>不須要本身添加啊，小程序自動添加的。

7.3開啓識別轉義字符

<text></text>標籤中默認不能識別&nbsp;&lt;&gt;等轉移字符,設置decode屬性便可識別這些轉移字符。

<text>&lt;&nbsp;&gt;<text>
==>輸出，不可識別轉移字符
&lt;&nbsp;&gt;
<text decode="{{true}}">&lt;&nbsp;&gt;<text>
==>輸出，能夠識別轉移字符
< >
複製代碼

7.4 隱藏元素

VueJS中使用v-if控制元素是否渲染，使用v-show控制元素是否顯示。微信小程序中也有對應的操做，使用wx:if控制元素是否渲染，使用屬性hidden控制元素是都顯示。

<!--渲染且顯示(display:inline)-->
<text>Hello World<text>
<!--渲染但不顯示(display:none)-->
<text hidden="{{true}}">Hello World<text>
複製代碼

交流

若是這篇文章幫到你了，以爲不錯的話來點個Star吧。 github.com/lizijie123

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程