【微信小程序】项目实战—抽签应用

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: 【微信小程序】项目实战—抽签应用

完成学习前面章节的微信小程序开发必备的基础知识,从本章开始就可以进入完整的应用开发了。很多大型的应用主要通过App来实现,微信小程序的定义则主要是工具类的应用,宗旨是做到即用即走。抽签应用完全符合这一特性,所以本章将实现一个抽签类型的小程序。

本章主要涉及的知识点有:

UI组件的使用

表单的使用

本地存储

1.项目起步

本节开始设计抽签项目所需要包含的功能。在平时遇到难以决定的事情时,可以使用小程序进行抽签。该抽签应用包括以下功能。

增加抽签项及其内容项

删除抽签项及其内容项

抽签

本地存储

输入校验

用户交互提示

接下来新建一个项目draw作为本章的项目。导入UI框架iView,并在根目录新建文件夹images。项目中所需要用到的图片可以直接从示例代码中获取。目录如图所示。

image-20220727155057058

将app.js清空,删除index和logs页面,新建home、mine、edit-item、draw-view页面,最后在app.json、app.wxss中输入以下代码:

// app.json

·..

"tabBar":{

"selectedColor":"#2C8BEF""list": [

{

"selectedIconPath":"images/home2.png","iconPath":"images/home.png","pagePath":"pages/home/home","text":"首页"},{

"selectedIconPath":"images/mine2.png","iconPath":"images/mine.png","pagePath":"pages/mine/mine","text":"我的"

}]

},

·..

// app.wxss page {

background-color: #EFEFEF;

运行效果如图所示。

image-20220727155740162

【代码解析】一个带底部导航栏的首页已经完成。导航栏的内容主要是通过tabBar参数来实现的。

注意:应把app.json中的v2删除,否则UI框架可能会运行出错。

2.项目开发

准备工作完成后,正式进入编码阶段。

2.1首页开发

打开home页面,输入以下代码:

// home.json

"navigationBarTitleText":"首页""usingComponents":

{

"i-button":"/dist/button/index",

"i-cell-group":"/dist/cell-group/i ndex","i-cell":"/dist/cell/index",

   "i-modal":"/dist/modal/index"

}

// home.wxml

<i-button type="primary" bind:click="addItem">添加选项</i-button>

<i-cell-group><i-cell

wx:for="{{listData}}" wx:for-item="item" wx:key="item"

data-item="{{item}}" title="{{item}}" bindtap="draw"

bindlongpress="delete" is-link></i-cell></i-cell-group>

<i-modal title="删除确认" visible="{{ visible }}" actions="{{ actions }}" bind:click="realDelete">

<view>删除后无法恢复哦</view></i-modal>

// home.js

// pages/home/home.js

Page({ data:{

listData:[],

currentItem:'' actions: [{

name:'取消'},

name:'删除',

color:'#ed3f14', loading:false}

],

visible:false},

onShow: function () {  

this.setData({

listData:wx.getStorageSync('homeList')})},

//加选项 addItem() {

wx.navigateTo({

url:'../edit-item/edit-item',

},

//进入抽签页 draw(e){

wx.navigateTo({

url:'../draw-view/draw-view?item='+ e.currentTarget.dataset.item

},

//删除子选项弹窗 delete(e){

console.log(e) this.setData({

visible: true,

currentItem: e.currentTarget.dataset.item});

// 删除子选项

realDelete({detail}){

if (detail.index=== 1) {

var newArray=[];

for (const item of this.data.listData){

if (item!=this.data.currentItem){ newArray.push(item);

}

}

this.setData({

listData: newArray

1

wx.setStorageSync('homeList',this.data.listData)

wx.removeStoraqeSync(this.data.currentItem) wx.showToast({

title:'删除成功',

1)

   this.setData({

visible: false

!({

})

【代码解析】首先在home.json中导入需要用到的UI组件。在页面结构上,顶部是一个添加选项按钮,并通过wxfor来显示选项,最后的i-modal是弹窗组件,通过visible控制。在页面跳转方面,edit-item是添加选项页,draw-view是抽签页。删除功能通过覆盖homeList的选项来实现,删除成功后,要循环删除子选项。

2.2新增页面开发

由于还没有开发添加选项页,因此放效果图之前需要先开发一个添加选项页面。在edit-item页面中输入以下代码:

// edit-item.json{

"navigationBarTitleText":"选项","usingComponents":{

"i-panel":"/dist/panel/index","i-input":"/dist/input/index","i-button":"/dist/button/index"

/

// edit-item.wxml

<i-panel title="{{title}}">

<i-input

value="{{itemName}!"

placeholder="请输入选项"

bind:change="changeItem"/></i-panel>

<i-button bind:click="submit" type="primary">提交</i-button>

// edit-item.js

// pages/edit-item/edit-item.js Page({

data:{

title:'添加选项',

saveKey:'homeList', itemName:''

   },

onLoad:function (options){ if (options.item){ this.setData({

title:'添加"'+options.item+'"的子选项', saveKey:options.item})}

},

changeItem(e){ this.setData({

itemName: e.detail.detail.value})

},

// 提交

submit() {

if (this.data.itemName.length===0) { wx.showToast({

title:'内容过短', icon:'none'})

} else if (this.data.itemName.length >10){ wx.showToast({

title:'内容过长', icon:'none'})

}else {

var items;

var key= this.data.saveKey; if (wx.getStorageSync(key)) {

items=wx.getstorageSync(key); for (const key of items) {

if (key== this.data.itemName){ wx.showToast({ title:'已存在', icon:'none'})

returni

}

}else {

items = [];

items.push(this.data.itemName);

wx.setStorageSync(key,items); wx.showToast({

title:'保存成功',})

setTimeout(() => {

wx.navigateBack()},1000)

}})

添加选项页的运行效果如图一所示。

【代码解析】新增选项页面之后需要与新增子选项复用,所以我们编写代码的时候要兼顾两者。同样先在JSON文件中导入用到的UI组件。表单上只有一个input需要输入,提交的时候判断是否为空、是否过长即可。如果是首页选项,就保存在homeList中,子选项则以首页选项的名字为key保存。添加完成后,首页如下下图所示。

【添加选项页】

image-20220727160425487

【首页效果】image-20220727160459366

2.3 抽签页面开发

现在首页已经有了选项,并且可以通过新增页来增加。此时可以开发抽签页,列出子选项,用于抽签。打开draw-view页面,输入以下代码:

// draw-view.json

"navigationBarTitleText":"抽签","usingComponents":{

"i-button":"/dist/button/index"

"i-cell-group":"/dist/cell-group/index","i-cell":"/dist/cell/index","i-modal":"/dist/modal/index"

// draw-view.wxml

<i-button type="primary" bind:click="addItem">添加子选项</i-button><i-button type="success" bind:click="draw">抽签</i-button>

<i-cell-group><i-cell

wx:for="{{listData}}" wx:for-item="item" wx:key="item"

data-item="{{item}}" title="{{item}}"

bindlongpress="delete"></i-cell></i-cell-group>

<i-modal title="删除确认"visible="{{ visible }}" actions="{{ actions }}"

bind:click="realDelete">

<view>删除后无法恢复哦</view></i-modal>

// draw-view.js

//pages/draw-view/draw-view.js Page({

data:{

listData:[], lastItem:''

currentItem:'', actions:[{

name:'取消'},

name:'删除',

color:'#ed3f14', loading:false}

],

visible:false},

onLoad:function(options){

this.setData({

lastItem: options.item

wx.setNavigationBarTitle({

title: options.item,})},

onShow:function() {

this.setData({

listData:wx.getStorageSync(this.data.lastItem)})},

//添加子选项 addItem() {

wx.navigateTo({

url:'../edit-item/edit-item?item='+ this.data.lastitem

})},

// 抽签 draw(){

if (this.data.listData.length == 0) { wx.showToast({

title:'没有数据', icon:'none'})

} else {

const randomNumber=this.getRandomNumber(0,

this.data.listData.length);

wx.showToast({

title:this.data.listData[randomNumber]})

},

// 获取随机数

getRandomNumber(begin,end){

return Math.floor(Math.random() * (end-begin))+ beging},

// 删除子选项弹窗 delete(e){

this.setData({

visible: true,

currentItem: e.currentTarget.dataset.item

});

},

// 删除子选项

realDelete({detail}) {

if (detail.index=== 1) {

var newArray=[];

for (const item of this.data.listData){

if (item!= this.data.currentItem){

newArray.push(item);

)}

this.setData({

listData: newArray})

wx.setStorageSync(this.data.lastItem,this.data.listData); wx.showToast({

title:'删除成功',})}

this.setData({

visible:false});}

})

添加子选项后,点击“抽签”按钮,运行效果如图所示。

【代码解析】进入页面后,会根据上一个页面传入的选项名来获取存储的子选项数据。点击“抽签”按钮,会通过随机数从现有子选项中抽取一个进行弹窗显示。添加、删除子选项功能与首页的基本相同。

image-20220727160903644

2.4 我的页面开发

通过前面3个页面的开发,主要的抽签流程已经走通了。为了完善这个应用,补充“我的”页面,增加清空、微信登录功能。打开mine页面,输入以下代码:

// mine.json{

"navigationBarTitleText":"我的",

"usingComponents":{

"i-card":"/dist/card/index"

"i-button":"/dist/button/index"

"i-cell-group":"/dist/cell-group/index""i-cell":"/dist/cell/index","i-modal":"/dist/modal/index"

// mine.wxml

<view class="view-margin">

<i-card

title="{{userInfo.nickName}}"

extra="{{userInfo.country}}"

thumb="{{userInfo.avatarUrl}}">

<!-- <view slot="content">用户名:张三</view> --></i-card>

</view>

<view class="view-margin"><i-cell-group><i-cell

title="清空数据"

bindtap="clearData" is-link></i-cell><i-cell

title="意见反馈"

bindtap="callBack" is-link></i-cell></i-cell-group></view>

<i-button

wx:if="{{userInfo.nickName=='未登录'}}" type="primary"

open-type="getUserInfo"

bind:getuserinfo="login">登录</i-button>

<i-button

wx:if="{{userInfo.nickName!='未登录'}}" type="error"

bind:click="logout">退出登录</i-button>

<i-modal

title="清空确认"

visible="{{ visible }}" bind:ok="delete"

bind:cancel="cancel">

<view>清空后无法恢复哦</view></i-modal>

// mine.wxss.view-margin{

margin-top:16px;}

// mine.js Page({

data:{

userInfo:{

nickName:'未登录', country:'-',

avatarUrl:'https://i.loli.net/2017/08/21/599a521472424.jpg

visible:false

onLoad(options){

if (wx.getStorageSync('userInfo')){ this.setData({

userInfo: wx.getStorageSync('userInfo')

})

},

clearData(){

this.setData({ visible:true

},

delete() {

const array=wx.getstorageSync('homeList') for (const item of array) {

wx.removeStorageSync(item)}

wx.removeStorageSync('homeList') this.setData({ visible:false

cancel() {

this.setData({ visible:false})},

login(e){

if (e.detail.userInfo){

this.setData({

userInfo: e.detail.userInfo})

wx.setStorageSync('userInfo',e.detail.userInfo)} else {

wx.showToast({

title:'登录失败', icon:'none'})

}

},

logout() {

wx.removeStorageSync('userInfo'y this.setData({

userInfo:{

nickName:'未登录', country: '-',

avatarUrl:"https://i.loli.net/2017/08/21/599a521472424.ipq

}

})}})

在“我的”页面点击“登录”按钮,会弹出权限申请框,点击允许授予权限后即可登录,运行效果如图所示。

image-20220727161215514

【代码解析】清空数据通过循环homeList里的数据把所有数据移除掉。登录功能在用户,点击允许按钮后,从e.detail.userInfo取出用户的头像、昵称等信息进行展示,并通过wxif控制“显示登录”或“退出登录”按钮。如果需要测试,可以点击微信开发工具中的“清缓存→清除登录状态”,如图所示。

image-20220727161259299

3.小结

本章综合运用前面学到的知识创建了一个易用的工具类应用。虽然该程序的基本功能已经齐全,但是仍有较大的改进空间。建议读者自行添加编辑选项、改变排序等功能来作为练习。为了将各种知识分类展示,本章的内容仅使用了本地存储,没有设计网络请求。下一章我们将做一个带网络请求的完整应用。

目录
相关文章
|
3月前
|
人工智能 数据可视化 API
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
10 分钟构建 AI 客服并应用到网站、钉钉或微信中测试评
117 2
|
4月前
|
人工智能
10 分钟构建 AI 客服并应用到网站、钉钉或微信中简说
10 分钟构建 AI 客服并应用到网站、钉钉或微信
|
1月前
|
存储 缓存 开发框架
提高微信小程序的应用速度
【10月更文挑战第21天】提高微信小程序的应用速度需要从多个方面入手,综合运用各种优化手段。通过不断地优化和改进,能够显著提升小程序的性能,为用户带来更流畅、更高效的使用体验。
60 3
|
1月前
|
人工智能 小程序 算法
微信小程序地图定位的核心技术与实际应用详解
在移动互联网时代,微信小程序凭借其轻量化和普及性,成为室内地图导航的理想平台。本文探讨了微信小程序在室内定位领域的创新应用,包括蓝牙iBeacon定位、高精度地图构建及AI路径规划等核心技术,及其在购物中心、医院、机场火车站和景区等场景的应用,展示了其为用户带来的高效、智能的导航体验。
117 0
|
3月前
|
人工智能 运维 负载均衡
10 分钟构建 AI 客服并应用到网站、钉钉或微信中
《10分钟构建AI客服并应用到网站、钉钉或微信中》的解决方案通过详尽的文档和示例代码,使具有一定编程基础的用户能够快速上手,顺利完成AI客服集成。方案涵盖高可用性、负载均衡及定制化选项,满足生产环境需求。然而,若文档不清晰或存在信息缺失,则可能导致部署障碍。实际部署中可能遇到网络、权限等问题,需逐一排查。云产品的功能、性能及操作配置便捷性直接影响解决方案效果,详尽的产品手册有助于快速解决问题。总体而言,该方案在各方面表现出色,值得推荐。
|
2月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
72 5
|
3月前
|
小程序
浅谈提高微信小程序的应用速度
浅谈提高微信小程序的应用速度
|
3月前
|
小程序 Android开发 iOS开发
ISO钉钉小程序小程序webview打开nextjs应用异常
ISO钉钉小程序小程序webview打开nextjs应用异常
59 3
|
4月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
6月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的代驾应用系统附带文章和源代码部署视频讲解等
213 21