wxml 判斷小程式_微信小程式三個執行個體帶你入門

微信小程式三個執行個體帶你入門

前置說明

建立微信小程式項目時，預設使用雲開發服務（不需要雲開發可以關閉）

項目目錄及檔案含義檢視微信官方文檔
app.json部分重點說明

wxml 判斷小程式_微信小程式三個執行個體帶你入門

開發一個預設頁面

我們建立componet檔案夾，在componet中建立submit檔案夾，最後建立名為submit的page頁，結果如下。

wxml 判斷小程式_微信小程式三個執行個體帶你入門

然後在app.json中配置一個預設頁面“componet/submit/submit"。

wxml 判斷小程式_微信小程式三個執行個體帶你入門

最後在submit.js中配置加載資料，在submit.json中配置導航欄及标簽欄資料，在wxml配置頁面結構，在wxss中配置結構樣式，ctrl+s或直接儲存運作，結果如下。

wxml 判斷小程式_微信小程式三個執行個體帶你入門

開發一個資料動态變化的單頁面（以使用者授權為例）

效果圖展示：

wxml 判斷小程式_微信小程式三個執行個體帶你入門

講解：

我們可以在onload加載方法中或者在任意一個自定義的綁定函數或者監聽函數中通過this.setData({key:value})的形式對資料重新指派，之後該資料就會動态呈現在頁面中，本執行個體中獎擷取到的userInfo對象資料顯示在單個頁面中,源碼展示。

js源碼：

const app = getApp()
Page({
  data: {
    //判斷小程式的API，回調，參數，元件等是否在目前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    isHide: false,
    userInfo:{},
    haveUser:false
  },
  onLoad: function () {
    var that = this;
    // 檢視是否授權
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          wx.getUserInfo({
            success: function (res) {
           
              wx.login({
                success: res => {
                  // 擷取到使用者的 code 之後：res.code
                  console.log("使用者的code:" + res.code);
                  // 可以傳給背景，再經過解析擷取使用者的 openid
                  // 或者可以直接使用微信的提供的接口直接擷取 openid ，方法如下：
                  // wx.request({
                  //     // 自行補上自己的 APPID 和 SECRET
                  //     url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
                  //     success: res => {
                  //         // 擷取到使用者的 openid
                  //         console.log("使用者的openid:" + res.data.openid);
                  //     }
                  // });
                }
              });
            }
          
          });
      
        } else {
          // 使用者沒有授權
          // 改變 isHide 的值，顯示授權頁面
          that.setData({
            isHide: true
          });
        }
      }
    });
  },
  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //使用者按了允許授權按鈕
      var that = this;
      // 擷取到使用者的資訊了，列印到控制台上看下
      app.globalData.userInfo = e.detail.userInfo;
      //授權成功後,通過改變 isHide 的值，讓實作頁面顯示出來，把授權頁面隐藏起來
      that.setData({
        isHide: false,
        haveUser:true,
        userInfo:e.detail.userInfo
      });
   
    } else {
      //使用者按了拒絕按鈕
      wx.showModal({
        title: '警告',
        content: '您點選了拒絕授權，将無法進入小程式，請授權之後再進入!!!',
        showCancel: false,
        confirmText: '傳回授權',
        success: function (res) {
          // 使用者沒有授權成功，不需要改變 isHide 的值
          if (res.confirm) {
            console.log('使用者點選了“傳回授權”');
          }
        }
      });
    }
  }
})

需要提示點：this在上述函數中僅在最外層可用，若函數中嵌套函數，則嵌套函數中的this表示的是該嵌套函數，解決辦法：聲明

var that = this

,使用that代表app自身。

json源碼：

{
  "navigationBarTitleText": "登入"
}

wxss源碼：

.header {
    margin: 90rpx 0 90rpx 50rpx;
    border-bottom: 1px solid #ccc;
    text-align: center;
    width: 650rpx;
    height: 300rpx;
    line-height: 450rpx;
}
 
.header image {
    width: 200rpx;
    height: 200rpx;
}
 
.content {
    margin-left: 50rpx;
    margin-bottom: 90rpx;
}
 /**index.wxss**/
.userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .userinfo-avatar {
    width: 128rpx;
    height: 128rpx;
    margin: 20rpx;
    border-radius: 50%;
  }
  
  .userinfo-nickname {
    color: #aaa;
  }
  
  .usermotto {
    margin-top: 200px;
  }
.content text {
    display: block;
    color: #9d9d9d;
    margin-top: 40rpx;
}
 
.bottom {
    border-radius: 80rpx;
    margin: 70rpx 50rpx;
    font-size: 35rpx;
}

wxml源碼：

<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='/images/template/1.jpg'></image>
        </view>
 
        <view class='content'>
            <view>申請擷取以下權限</view>
            <text>獲得你的公開資訊(昵稱，頭像等)</text>
        </view>
 
        <button class='bottom' type='primary' open-type="getUserInfo"  bindgetuserinfo="bindGetUserInfo">
            授權登入
        </button>
    </view>
    <view wx:else>請更新微信版本</view>
</view>
<view class="userinfo" wx:if="{{haveUser}}">
    <block >
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
</view>

在wxml中有很多标簽都可以綁定事件（檢視api文檔）即可，我經常使用bindtap,catchsubmit,catchreset這些綁定屬性實作綁定

開發一個頁面間資料傳遞的執行個體

我們都知道http請求包括：

post

get

head

patch

options

put

delete

trace

connect

常用的有

post

get

，在微信小程式中對應實作方式是全局 url連結，這兩個我都介紹一下。

一 URL傳遞。

我們可以使用navigator(類似html中的a标簽）實作跳轉，跳轉時可攜帶參數。我們也可以通過綁定事件中使用wx.navigatorto等實作跳轉，綁定請自行檢視api文檔。參數可以使用form實作，這裡不牽扯太多，自行檢視[文檔](

https://developers.weixin.qq....

URL傳遞源碼附上：

<!--login.wxml-->
<view class="container">
 <!-- 使用navigator元件 -->
 <navigator url="pages/index/index?title=我是傳遞值">傳遞</navigator>
</view>

index.js

// pages/index/index.js
Page({
 
 data: {
 title:''
 },
 
 onLoad: function (options) {
 console.log(options) //列印options,可以看到title的值可以擷取到
 this.setData({
 title:options.title //為頁面中title指派
 })
 },
})

index.html

<view class='container'>
 {{title}}
</view>

二全局傳遞

全局儲存的資料需要滿足符合整個小程式都需要才可以，比如一個視訊播放小程式，使用者資訊是需要的，而一個視訊資訊是不需要儲存的，否則整個小程式全局所占緩存會快速升高，嚴重造成當機。不多說了，源碼附上。

app.js

//app.js
App({
 globalData: {}
})

index.wxml

<!--index.wxml-->
<!-- 點選觸發go_Demo函數 -->
<view class="container" bindtap='go_Demo'>
 傳遞
</view>

index.js

//index.js
//擷取應用執行個體
const app = getApp()
Page({
 data: {
 title:'參數傳遞'
 },
 go_Demo: function() {
 app.globalData.title = this.data.title
 wx.navigateTo({
 url: '../demo/demo',
 })
 }
})

demo.js

// pages/demo/demo.js
//擷取應用執行個體
const app = getApp()
Page({
 data: {
 title:''
 },
 onLoad: function (options) {
 console.log(app.globalData.title) //列印options,可以看到title的值可以擷取到
 this.setData({
 title: app.globalData.title //為頁面中title指派
 })
 },
})

更多微信小程式相關檢視

我的程式員提升專欄

，有需要請評論區留言。

wxml 判斷 小程式_微信小程式三個執行個體帶你入門

微信小程式三個執行個體帶你入門

前置說明

開發一個預設頁面

開發一個資料動态變化的單頁面（以使用者授權為例）

開發一個頁面間資料傳遞的執行個體

wxml 判斷小程式_微信小程式三個執行個體帶你入門