微信小程序部分功能介绍和实现
文章目錄
- 1.實現微信小程序授權
- 2.輪播圖設置
- 3.小程序template（模板）模塊基本使用
- 4.上下分割線排版
- 5.跳轉按鈕設置
- 6.設置小程序tab工具欄設置
1.實現微信小程序授權
在登錄微信小程序前，我們首先應該先經過用戶允許授權才能進行后面的操作，現在的新建的微信小程序在index中會自動給出授權代碼和跳轉信息，沒有點擊獲取頭像像信息，微信小程序就不能將你的信息導入進來，在原來的基礎上我增加了跳轉按鈕和頁面樣式、結構做了一些修改，效果如下
index.js中的代碼如下：
//index.js //獲取應用實例 const app = getApp()Page({data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo')},//事件處理函數bindViewTap: function() {wx.navigateTo({url: '/pages/logs/logs'})},onLoad: function () {if (app.globalData.userInfo) {this.setData({userInfo: app.globalData.userInfo,hasUserInfo: true})} else if (this.data.canIUse){// 由于 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回// 所以此處加入 callback 以防止這種情況app.userInfoReadyCallback = res => {this.setData({userInfo: res.userInfo,hasUserInfo: true})}} else {// 在沒有 open-type=getUserInfo 版本的兼容處理wx.getUserInfo({success: res => {app.globalData.userInfo = res.userInfothis.setData({userInfo: res.userInfo,hasUserInfo: true})}})}},getUserInfo: function(e) {console.log(e)app.globalData.userInfo = e.detail.userInfothis.setData({userInfo: e.detail.userInfo,hasUserInfo: true})} })在Index.js代碼中，簡單介紹一下這段代碼
bindViewTap: function() {wx.navigateTo({url: '/pages/logs/logs'})},完成從index頁面跳轉到logs頁面，wx.navigateTo為跳轉時保留原來界面
index.json的代碼如下：
{"navigationBarTitleText": "微信小程序","usingComponents": {},"navigationBarTextStyle":"black" }進行一些簡單的介紹
在index.json中
navigationBarTitleText ：頁面的標題
navigationBarTextStyle:頁面標題顏色，只有black和white兩個選項，默認是black（黑色）
index.wxml的代碼如下：
<view class="container"><view class="userinfo"><button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button><block wx:else><image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image><text class="userinfo-nickname">{{userInfo.nickName}}</text></block></view><navigator class="goStudy" style='display :inline;' url='/pages/logs/logs' open-type="navigate" hover-class="nav-hover"><ol><text>開啟小程序之旅</text></ol></navigator> </view>其中，navigator能夠實現小程序跳轉按鈕樣式框架
index.wxss的代碼如下：
/**index.wxss**/ /* 頁面顏色設置 */ page{height: 100%;background: #1ff; } /* 使用者的屬性設置 */ .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; } .container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box; } /* 設置跳轉界面長寬和顏色 *//* 設置字體大小和粗細、間距 */.goStudy{/* 設置邊框長寬 */width: 280rpx;height: 80rpx;text-align: center;/* 設置邊框離上、左、下的距離 */margin:50rpx 20rpx 100rpx;/* 設置字體大小 */font-size: 35rpx;font-weight: 700;/* 邊框長寬 */border: 1rpx solid rgb(245, 229, 9);/* 設置邊框的角圓不圓 */border-radius: 1000rpx;/* 邊框與上面距離 */line-height: 80rpx; } /* 注釋：設置跳轉點擊時的跳轉顏色 */ .nav-hover{color:rgb(255, 0, 13); }具體作用在代碼中已標明
2.輪播圖設置
可以左右切換圖片觀看效果，完成多張圖片切換
需要學習image圖片插入方法，先創建一個文件夾，文件夾中設置小的文件夾，然后將準備好的圖片復制粘貼進去，設置圖片名字方便后面填寫內容，例子：<image src='/lsq/img/luo1.jpg'></image>，主要找到圖片存儲地方就好。
然后用swiper-item嵌套進去，例子：
需要插入幾張圖片就放置幾個上圖例子
logs.wxml的代碼如下：
<view > <swiper indicator-dots='true' indicator-color='yellowgreen' indicator-active-color="pink"> <swiper-item> <image src='/lsq/img/luo1.jpg'></image> </swiper-item> <swiper-item> <image src='/lsq/img/luo2.jpg'></image> </swiper-item> <swiper-item> <image src='/lsq/img/luo3.jpg'></image> </swiper-item> </swiper> <text class='lsq'>輪播圖</text> <view>logs.wxss的代碼如下：
/* 輪播圖設置 */ swiper{width: 100%;height: 400rpx; } .lsq{margin-top: 20rpx;margin-bottom: 1rpx;display:block;text-align: center;align-items: center; } swiper image{width: 100%;height: 100%; }3.小程序template（模板）模塊基本使用
在小程序logs中調用data3寫好的模板，直接使用，效果如下
在logs.wxml中首位輸入下面內容，完成模板鏈接調用
在data3.wxml第一段輸入：<template name='listTmp'>，完成地址調用。data3.js和data3.json用不到可以直接刪掉，但是需要在app.json中的pages頁面中刪除"pages/data3/data3"，因為系統會自動保存到app.json，直接使用的話會出現data3.js和data3.json不存在而報錯現象，需要注意一下
data3.wxml的代碼如下：
<!--pages/data3/data3.wxml--> <template name='listTmp'> <view class='tmpContainer'><view class='avatar_data'><image src="/lsq/img/luo5.png"></image><text>may 19 2020</text></view><text class='company'>微信小程序</text><image class='contentImg' src="/lsq/img/luo3.jpg"></image><text class='content'>微信小程序（Wechat Mini Program）簡稱小程序，英文名Mini Program，是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應用。這次微信小程序的推出，應該更會激發客戶對微信公號的開發熱情。</text><view class='collection_love'>< image src="/lsq/img/播放.png"></image><text>88</text><image src="/lsq/img/設置.png"></image><text>32</text></view><view class="star1"><image class='luo7' src="/lsq/img/luo7.jpg"></image></view> </view> </template>data3.wxss的代碼如下：
/* pages/data3/data3.wxss */ .tmpContainer{display:flex;flex-direction: column;border-top: 1rpx solid #eee;border-bottom: 1rxp solid #eee;margin: 10rpx 0; } .avatar_data{padding: 10rpx; } .avatar_data image{width: 60rpx;height: 60rpx;vertical-align: middle;margin-right: 10rpx; } .avatar_data text{font-size: 32rpx; } .company{margin-left: 10rpx;font-size: 36rpx;font-weight: 700;margin: 10rpx; } .contentImg{width: 100%;height: 460rpx; } .content{font-size: 32rpx;text-indent: 32rpx; } .collection_love image{width: 32rpx;height: 32rpx;vertical-align: middle;margin-right: 10rpx; } .collection_love text{font-size: 28rpx;margin-right: 10rpx; } .star1{display:flex;flex-direction: column;border-top: 1rpx solid #eee;border-bottom: 1rxp solid #eee;margin: 20rpx 0; } .luo7{width: 100%;height: 460rpx;margin-top: 30rpx; }4.上下分割線排版
設置這個分割線使得排版看起來比較整潔，先設置線條名稱，插入代碼如下：
<view class="star1"></view>方式如下
本例名稱class="star1",再進行線條效果設置，代碼如下
我加粗一下效果更明顯，修改代碼：border-top: 100rpx solid #eee;，可以修改線條顏色、長度和寬度
5.跳轉按鈕設置
設置跳轉到下一個界面，跳轉到下一個界面
logs.wxml的代碼如下：
logs.wxss的代碼如下：
.goStudy{/* 設置邊框長寬 */width: 200rpx;height: 80rpx;text-align: center;/* 設置邊框離上、左、下的距離 */margin:10rpx 280rpx 10rpx;/* 設置字體大小 */font-size: 35rpx;font-weight: 700;/* 邊框長寬 */border: 1rpx solid rgb(245, 229, 9);/* 設置邊框的角圓不圓 */border-radius: 1000rpx;/* 邊框與上面距離 */line-height: 80rpx; } /* 注釋：設置跳轉點擊時的跳轉顏色 */ .nav-hover{color:rgb(255, 0, 157); }通過.nav-hover設置跳轉時的顏色
6.設置小程序tab工具欄設置
小程序工具欄最多5個工具欄，最少2個工具欄，因為一個工具欄就不用tab就能完成，我們采用3個工具欄，先給出效果，然后再演示如何實現
要想完成tab工具欄設置，需要在app.json設置工具欄，注意最多只能設置5個
app.json代碼如下：
tabBar中
"tabBar": {"color": "#444","selectedColor": "green","backgroundColor": "#e0e0e0","borderStyle": "black","position": "bottom",color是設置任務欄字體顏色；
selectedColor是設置點擊跳轉時顏色設置；
backgroundColor是背景顏色設置；
borderStyle是字體顏色設置，只有white和black兩個選項，不支持其他選項；
position是任務欄位置，只有top和bottom兩個選項，不支持其他選項；
List任務欄中
"list": [{"text": "工作欄1","pagePath": "pages/index/index","iconPath": "/lsq/img/luo4.png","selectedIconPath": "/lsq/img/luo4-active.png"},text是任務欄的名稱；
pagePath是任務欄的頁面路徑；
iconPath是任務欄未點擊時顯示的圖標；
selectedIconPath是任務欄點擊時顯示的圖標；
再補充一點，pages中的數組誰放在第一個，就先顯示哪個頁面，所以為了方便編寫程序，在編寫哪個頁面時就把哪個頁面放在第一個，再編譯時就方便觀看效果，節省時間
總結
以上是生活随笔為你收集整理的微信小程序部分功能介绍和实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML5的入门教程
- 下一篇： 小程序开发全局配置