微信小程序：入門基礎教程

時間  2019-11-08
標籤 微信 程序 入門 基礎 教程 简体版
原文   原文鏈接

準備工做

要開發微信小程序以前，須要作一些準備工做，首先進入https://mp.weixin.qq.com/debu...html

clipboard.png
而後再進入https://mp.weixin.qq.com/debu...，接下來就解壓源碼包和安裝微信開發工具，安裝好開發軟件以後，在桌面能夠看到
clipboard.png
而後點擊進入須要手機微信掃碼確認登陸，掃碼完以後選擇本地小程序項目web

clipboard.png

clipboard.png

選擇添加項目以後json

clipboard.png

若是想要學習一下微信小程序，暫時不發佈的，就能夠點擊無AppID,若是後期要發佈就去官網申請小程序賬號，會給你發一個AppID,項目名稱你就隨意取一個，項目目錄就進入剛剛咱們下載解壓後的源碼包，而後就會進入微信開發的界面了小程序

clipboard.png

瞭解完這個開發界面以後，咱們就能夠進行簡單的微信小程序開發了微信小程序

小程序配置文件

首先來講下小程序的三個全局文件：
app.js:小程序腳本，聲明全局變量和監聽處理小程序的生命週期函數
app.json:全局配置文件，如小程序有多少個頁面，窗口標題顏色內容，導航條配置，窗口顏色等等，注意：此頁不可添加任何註釋
app.wxss:存放公共樣式
另外還有兩個文件，一個是utils這個文件裏面主要是放一些通用工具類，重點是pages這個文件，他是存放全部頁面的文件夾，小程序頁面主要是由三個文件構成，wxml,wxss,js,json,
pages裏面的文件你是能夠刪除，而後創建屬於本身的文件名稱，目前pages中默認兩個文件index和logs你能夠刪除，可是若是你新創建你的新頁面文件，得在app.json中聲明，這裏要注意一下，在app.json中的pages數組中，第一個聲明的頁面就是微信小程序會進入的首頁數組

clipboard.png

進入開發階段

  • 1. 改變頂部導航樣式

若是要改變某頁面頂部導航樣式，要在當前頁面的json文件中修改，例如，要修改index頁面的頂部導航，則在index.json中設置微信

{
  "navigationBarTitleText": "首頁",
  "navigationBarBackgroundColor": "black",
  "navigationBarTextStyle": "#fff"
}

若是要修改所有頁面的頂部導航，則要在app.json中修改微信開發

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

若是在index.json中也設置了頂部導航，則優先級別是index.json,app.json裏面設置頂部導航是默認樣式
index頁面設置頂部導航，結果以下：app

clipboard.png

  • 2.頁面跳轉問題

首先微信小程序中有個navigator標籤，你能夠把他理解成web中的a標籤
在wxml文件中：xss

<!-- 跳轉到新頁面 -->
    <navigator url="../test/test">navigator跳轉</navigator>
   <!-- 跳轉到當前頁面 -->
    <navigator url="../test/test"  open-type="redirect">redirect跳轉</navigator>

固然除了能夠在wxml中直接寫跳轉，也能夠用另一種方法寫跳轉
在wxml中：

<text bindtap="navigatorFunc">navigator跳轉</text>
   <text bindtap="enterTest">redirect跳轉</text>

在js文件中：

enterTest:function(){
    wx.redirectTo({
      url: '../test/test',
    })
  },

  navigatorFunc:function(){
     wx.navigateTo({
       url: '../test/test',
     })
  },

  • 3.建立輪播圖

在wxml中：

<swiper indicator-dots="{{indicatorDots}}"  
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
      <block wx:for="{{imgUrls}}">  
        <swiper-item>  
           <navigator url="{{item.link}}" hover-class="navigator-hover">  
            <image src="{{item.url}}" class="slide-image"/>  
           </navigator>   
        </swiper-item>  
      </block>  
</swiper>

swiper不能放在任何元素內部，不然輪播會出錯
在wxss中：

.slide-image{
  width: 100%;
}

設置圖片寬度鋪滿整個屏幕
在js中：

data: {
      imgUrls: [
        {
          link: '/pages/index/index',
          url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701524.jpg'
        }, {
          link: '/pages/logs/logs',
          url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701516.jpg'
        }, {
          link: '/pages/test/test',
          url: 'http://www.wallcoo.com/holiday/2015%20New%20Year%2001/images/2015_celebrating_wallpaper_164701517.jpg'
        }
      ],
      // 是否須要底部輪播小點 
      indicatorDots: true,
      // 是否自動播放
      autoplay: true,
      // 自動播放時間間隔
      interval: 5000,
      // 滑動動畫時間
      duration: 1000,  

  },

其中link爲跳轉的連接，URL爲圖片的地址，可是這個圖片地址不能是本地地址，必須是線上圖片地址或者base64爲圖片
運行效果以下：

clipboard.png

  • 4.底部導航欄切換

在app.json中添加：

"tabBar": {
    "color": "#000",
    "selectedColor": "#1296db",
    "borderStyle": "white",
    "list": [
      {
        "selectedIconPath": "images/1-1.png",
        "iconPath": "images/1.png",
        "pagePath": "pages/index/index",
        "text": "首頁"
      },
      {
          "selectedIconPath": "images/1-1.png",
          "iconPath": "images/1.png",
        "pagePath": "pages/logs/logs",
        "text": "日誌"
      },
      {
          "selectedIconPath": "images/1-1.png",
          "iconPath": "images/1.png",
        "pagePath": "pages/test/test",
        "text": "測試"
      }
    ]
  }

selectedIconPath爲選中時底下圖標，iconPath爲未選中底下圖標，pagePath爲點擊時切換頁面路徑，text爲頂部文字內容，color爲底部文字顏色，selectedColor文字選中顏色，注意：底部導航切換按鈕不能超過五個
運行截圖：

clipboard.png

這裏要注意一點，當你的頁面路徑已經弄成底部導航切換時，其餘頁面要進入此頁面路徑切換代碼就不能用普通的切換了，正確代碼以下：
在js中：

wx.switchTab({
    url: 'pages/test/test',
  })

或者在wxml中：

<navigator url="/pages/index/index" open-type="switchTab">跳轉按鈕</navigator>

以上兩個是等價的

  • 5.表單提交和清空

在wxml中：

<!-- 表單 -->
   <form bindsubmit="formSubmit" bindreset="formReset">  
       <view class="group">
          <view class="title">用戶名：</view>
          <view class="cont">
             <input type="text" name="username" placeholder="請輸入用戶名"/>
          </view>
          <view class="clear"></view>
       </view>

        <view class="group">
          <view class="title">性別：</view>
          <view class="cont">
               <radio-group name="gender">  
                  <label><radio value="1"/>男</label>  
                  <label><radio value="0"/>女</label>  
                </radio-group>  
          </view>
          <view class="clear"></view>
       </view>

       <view class="group">
          <view class="title">food：</view>
          <view class="cont">
              <checkbox-group name="hobby">  
                 <label><checkbox value="0"/>蛋糕</label>  
                 <label><checkbox value="1"/>牛排</label>  
                 <label><checkbox value="1"/>排骨頭</label>  
              </checkbox-group> 
          </view>
          <view class="clear"></view>
       </view>

       <view class="group">
          <view class="title">贊成：</view>
          <view class="cont">
             <switch name="isagree"/>  
          </view>
          <view class="clear"></view>
       </view>

       <view class="group">
          <button form-type="submit">提交表單</button>
          <button form-type="reset">清空表單</button>
       </view>
    </form>

在wxss中：

.clear{
  clear: both;
}
.title{
  float: left;
  width: 100px;
  text-align: right;
}
.cont{
  float: left;
}
input{
  border:1px solid gainsboro;
}
.group{
  margin-top:20px;
}

在js中：

// 提交表單函數
  formSubmit:function(e){
      console.log(e);
      console.log("表單已經提交!");
      console.log("用戶名："+e.detail.value.username);
      console.log("性別：" + (e.detail.value.gender==1?"男":"女"));
  },

  // 清空表單函數
  formReset:function(e){
    console.log("表單已經清空！");
  },

效果以下：

clipboard.png

注意：formSubmit爲表單提交後執行的函數，e.detail.value中是表單提交上來的數據，這裏要注意，存放數據的標籤必定要有name屬性值才能獲取數據

  • 6.彈窗

1.模態框
在wxml中：

<view class="modalBox">
  <button bindtap="modalFunc">modal模態框</button>
  <button bindtap="createModal">動態建立模態框</button>
</view>     

<!-- 提示框 -->
<modal title="提示" confirm-text="確認" cancel-text="取消" hidden="{{modalHidden}}" mask bindconfirm="confirmFunc" bindcancel="cancelFunc">  
  是否確認提交？  
</modal>

在js中：

data: {
    //false顯示，true爲隱藏
    modalHidden:true
  },

  // 模態框出現
  modalFunc:function(){
    // 顯示提示框
    this.setData({
      modalHidden: false
    });
  },

  // 動態建立模態框
  createModal:function(){
    wx.showModal({
      title: '動態建立模態框',
      content: '本框測試用的哈',
      success: function (res) {
        if (res.confirm) {
          console.log('用戶點擊肯定')
        } else if (res.cancel) {
          console.log('用戶點擊取消')
        }
      }
    })
  },

  // 確認函數
  confirmFunc:function(){
    console.log("點擊了確認！");
    // 關閉提示框
    this.setData({
      modalHidden: true
    });
  },

  // 取消函數
  cancelFunc:function(){
    console.log("點擊了取消！");
      // 關閉提示框
    this.setData({
      modalHidden: true
    });
  },

運行結果以下：

clipboard.png
clipboard.png
clipboard.png

2.提示框
在wxml中：

<view class="modalBox">
  <button bindtap="toastFunc">toast提示框</button>
   <button bindtap="createToast">動態建立toast提示框</button>
</view>     


<!-- 提示框 -->
  <toast hidden="{{toastHidden}}">提交成功</toast>

在js中：

data: {
     //false顯示，true爲隱藏
    toastHidden:true
  },

  // 提示框出現
  toastFunc:function(){
    // 顯示提示框
    this.setData({
      toastHidden: false
    });

    // 兩秒後提示框消失
    var that = this;
    setTimeout(function(){
      that.setData({
        toastHidden: true
      });
    },2000);

  },

  // 動態建立提示框
  createToast:function(){
     wx.showToast({
       title: '設置成功',
     })
  },

截圖效果以下：

clipboard.png

以上這些都是微信小程序裏面比較基礎的內容，之後若是有新的發現會再次更新本篇文章。

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