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