前言
最近開(kāi)發(fā)一個(gè)投票小程序，適合入門(mén)練手。
大概實(shí)現(xiàn)幾點(diǎn)功能：
- 列表展示內(nèi)容，可展開(kāi)詳情
- 獲取用戶信息，每個(gè)微信用戶可限制投票次數(shù)
- 管理頁(yè)面（管理員身份可見(jiàn)），錄入管理信息
- 簡(jiǎn)單的后臺(tái)接口，投票信息增刪查改
創(chuàng)建項(xiàng)目
打開(kāi)官方的微信開(kāi)發(fā)者工具，選擇小程序，發(fā)現(xiàn)可以使用TypeScript和css預(yù)編譯，選擇TypeScript Less.
創(chuàng)建小程序,選擇typecript less
進(jìn)入開(kāi)發(fā)頁(yè)面，可以發(fā)現(xiàn)文件后綴為.ts了。
開(kāi)發(fā)頁(yè)面
安裝一些插件，有些類(lèi)似vs code，使用方便。自帶的代碼格式化功能一般，默認(rèn)切換到prettier.
安裝插件
Collapse 折疊面板
找了一下，發(fā)現(xiàn)微信沒(méi)有提供這個(gè)組件，先簡(jiǎn)單手寫(xiě)一個(gè)。
折疊面板
<!--index.wxml--><view class="home"> <view class="com-collapse"> <view class="com-collapse-item" wx:for="{{5}}" wx:key="i" bindtap="onExpand"> <text class="com-collapse-item-title"> 標(biāo)題{{item 1}}</text> <view class="com-collapse-item-details" style="display: {{display}}">456156</view> </view> </view></view
獲取用戶信息-坑
使用getUserProfile獲取用戶信息遇到坑了，函數(shù)在onLoad以及其他函數(shù)調(diào)用都不彈窗獲取用戶信息，只有按鈕直接綁定事件才行。
解決：使用wx.showModal手動(dòng)彈窗
showModal
loginModal() { const that = this; wx.showModal({ title: "需要授權(quán)獲取用戶信息", success: function (res) { if (res.confirm) { that.getUserProfile(); //這里是點(diǎn)擊了確定以后 console.log("用戶點(diǎn)擊確定"); } else { //這里是點(diǎn)擊了取消以后 console.log("用戶點(diǎn)擊取消"); } }, }); },
成功獲取到用戶信息，詳情頁(yè)面基本完成，下一步進(jìn)行管理頁(yè)面和接口的開(kāi)發(fā)。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。