Day 1
開始當然是新增賬號，安裝開發者工具…略過不談
第一天主要做的是做了一個簡單的tabbar
app.json代碼
"tabBar":{
"color": "#D1D1D1",
"selectedColor":"#000000",
"borderStyle": "#FFFFFF",
"list": [
{
"selectedIconPath": "images/1.png",
"iconPath": "images/12.png",
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"selectedIconPath": "images/2.png",
"iconPath": "images/22.png",
"pagePath": "pages/index2/index2",
"text": "釋出"
},
{
"selectedIconPath": "images/3.png",
"iconPath": "images/32.png",
"pagePath": "pages/index3/index3",
"text": "我的"
}
]
}
Day 2
學會了定義函數和一些js的文法：for循環，if判定
在函數内處理資料要用this.set.data({…})，調用變量要用this.data.變量
做了swiper展示圖檔
wxml代碼
<swiper indicator-dots="true"
autoplay="true" interval="10000" duration="1000" circular="true" class="swiper">
<block wx:for="{{arr}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
js代碼
Page({
data: {
mode: "scaleToFill",
arr: [],
asd: 1
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
var array = this.data.arr
for (let i = 1; i < 3; i++) {
array.push("/images/" + i + ".png")
}
this.setData({ arr: array })
}
})
Day 3
使用weui提供的模闆，省了很多事情。
在首頁面做了展示表格，實作點選進入内一頁面并可以傳回
wxml代碼1
<view class="page">
<view class="page__bd">
<view class="weui-panel weui-panel_access">
<view class="weui-panel__bd">
<navigator url="/pages/content/content" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
<image class="weui-media-box__thumb" src="{{icon60}}" />
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
<view class="weui-media-box__title">實驗一</view>
<view class="weui-media-box__desc">這是一個用來測試的内容。</view>
</view>
</navigator>
<navigator url="" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
<view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
<image class="weui-media-box__thumb" src="" />
</view>
<view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
<view class="weui-media-box__title">标題二</view>
<view class="weui-media-box__desc">由各種物質組成的巨型球狀天體，叫做星球。星球有一定的形狀，有自己的運作軌道。</view>
</view>
</navigator>
</view>
</view>
</view>
</view>
wxml代碼2
<image src="http://notice.mmxwl.club/wp-content/themes/twentyseventeen/assets/images/header.jpg" class="img" mode="widthFix"/>
<text>這裡可以寫下我想要展示的資訊和我想要展示的照片</text>
Day 4
主要寫了個人這個tab
當使用者已登入校園卡，會顯示其個人資訊，若沒有，則會彈出登入界面。
wxml代碼1
<text>若已登入顯示我的個人資訊和圖檔等\n未登入請點選登入</text>
<image src="1.png"></image>
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap='login'>登入</button>
</view>
js代碼1
login: function(){
wx.navigateTo({
url: '/pages/land/land',
})
}
wxml代碼2
<text>{{getApp().globalData.asd}}</text>
<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__bd">
<view class="weui-toptips weui-toptips_warn" wx:if="{{showTopTips}}">{{password}}</view>
<view class="weui-cells__title">登入</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">校園卡号</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="請輸入你的校園卡号" bindinput="getusername"/>
</view>
</view>
<view class="weui-cell weui-cell_input weui-cell_vcode">
<view class="weui-cell__hd">
<view class="weui-label">密碼</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="請輸入你的密碼" bindinput="getpassword" />
</view>
</view>
<view class="weui-cell weui-cell_input weui-cell_vcode">
<view class="weui-cell__hd">
<view class="weui-label">驗證碼</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="請輸入驗證碼" />
</view>
<view class="weui-cell__ft">
<image class="weui-vcode-img" src="{{arr}}" style="width: 108px" bindtap="changecheckwords"></image>
</view>
</view>
</view>
<view class="weui-cells__tips">登陸後可釋出尋物/尋主啟示</view>
<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="showTopTips">确定</button>
</view>
</view>
</view>
js代碼2
Page({
data: {
showTopTips: false,
arr:[]
},
onLoad: function () {
},
getusername: function(e) {
this.setData({
username: e.detail.value
})
},
getpassword: function (e) {
this.setData({
password: e.detail.value
})
},
/**通過點選切換驗證碼 */
changecheckwords:function(){
console.log("更換圖檔")
this.setData({ arr: [] })
this.setData({ arr: ["http://jwk.lzu.edu.cn/academic/getCaptcha.do;jsessionid=1F7CCF9E88BCE33A89F26AA149A9B68F.TA2"] })
}
});