AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

微信小程序学习笔记(5) -- todos案例

2022-10-08 160
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 微信小程序学习笔记(5) -- todos案例

TODOS案例:


项目介绍


https://github.com/zce/weapp-todos


样式书写


导航栏


效果：

1dc618a0ed9580ce8bfa6facb208c08f.png

具体代码:


<view class="search">
     <image src="../../images/plus.png"></image>
     <input type="text" placeholder="Anything here..." />
  </view>


/* pages/todos/todos.wxss */
.container{
  border-top: 1rpx solid #E0E0E0;
}
.search{
  display: flex; 
  align-items: center;
  margin: 20rpx;
  padding: 20rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
  box-shadow: 0 0 5rpx #E0E0E0;  
}
.search input{
  flex: 1;
  height: 40rpx;  
}
.search image{
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}


todos


<view class="todos">
      <view class="item">
        <icon type="success" />
        <text>Learning HTML</text>
         <icon type="clear" size="16"/>
      </view>
      <view class="item">
          <icon type="circle" />
          <text>Learning CSS</text>
          <icon type="clear" size="16"/>
      </view>
      <view class="item">
          <icon type="circle" />
          <text>Learning Javascript</text>
          <icon type="clear" size="16" />
      </view>
  </view>


.todos{
  margin: 20rpx;
  border: 1px solid #ccc;
  border-radius: 5rpx;
  box-shadow: 0 0 5rpx #E0E0E0;  
}
.todos .item{
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #E0E0E0;
  /* margin-bottom: -1px; */
}
.todos .item:last-child{
  border-bottom: 0;
}
.item text{
  flex: 1;
  margin-left: 20rpx;
  font-size: 30rpx;
  color: #444;
}


footer


<view class="footers">
  <text>Toggle All</text>
  <text>2 items left</text>
  <text>Clear completed</text>
</view>


.footers{
  display: flex;
  /* 内容对其方式 */
  justify-content: space-between;
  margin: 20rpx;
  font-size: 30rpx;
   color: #333;
}
.footers text{
  flex: 1;
  }


现在整体效果已经产生:

1dc618a0ed9580ce8bfa6facb208c08f.png



数据绑定


抽象数据模型


// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      search: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: false},
        {name: 'Learning HTML',completed: false}
      ]
  }
})


界面数据绑定


// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      search: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: true},
        {name: 'Learning HTML',completed: false}
      ]
  }
})


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="search">
     <image src="../../images/plus.png"></image>
     <input type="text" placeholder="Anything here..." value="{{search}}"/>
  </view>
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" wx:for="{{ todos}}" >
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16"/>
      </view>    
  </view>
  <view class="footers">
    <text>Toggle All</text>
     <text>{{ todos.length }} items left</text>
     <text>Clear completed</text>
  </view>
</view>


页面效果:

1dc618a0ed9580ce8bfa6facb208c08f.png


界面交互操作


新增


目标1： 搜索框中添加的数据，加入到列表当中:


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="header">
     <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
     <input type="text" placeholder="Anything here..." value="{{input}}" bindinput="inputChangeHandle"/>
  </view>
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" wx:for="{{ todos}}" >
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16"/>
      </view>    
  </view>
  <view class="footers">
    <text>Toggle All</text>
     <text>{{ todos.length }} items left</text>
     <text>Clear completed</text>
  </view>
</view>


// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      input: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: true},
        {name: 'Learning HTML',completed: false}
      ]
  },
  inputChangeHandle: function(e){
    //body
    console.log(e.detail.value);
    this.setData({
      input: e.detail.value
    });
  },
  //1.先让按钮点击时 执行一段代码
  //2. 拿到文本框里面的值
  // 2.1 由于小程序的数据绑定是单向的，
  //       必须要给文本框注册改变事件
  //3. 将这个值添加到列表中
  addTodoHandle: function(){
     //当添加按钮点击事件发生时执行的函数
     console.log(this.data.input)
     var todos =  this.data.todos;
     todos.push({       
         name: this.data.input,
         completed: false
      })  
     //必须显式的通过setData去改变数据，这样界面才能得到变化
     this.setData({
      todos: todos
     });
  }
})


效果:

1dc618a0ed9580ce8bfa6facb208c08f.png5d4c6812c8535adbb050f4ddf2e1bce8.png


新增逻辑优化


刚才的代码中，如果是input的内容为空，点击+号，还是会添加到todo的列表中:

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

逻辑优化: 只需要一行代码:

1dc618a0ed9580ce8bfa6facb208c08f.png


切换任务完成状态


在列表项上添加事件，改变选中项的completed的状态，然后setData赋值即可:


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="header">
     <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
     <input type="text" placeholder="Anything here..." value="{{input}}" bindinput="inputChangeHandle"/>
  </view>
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" 
      wx:for="{{ todos}}" bindtap="toggleTodoHandle" data-index="{{ index }}">
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16"/>
      </view>    
  </view>
  <view class="footers">
    <text>Toggle All</text>
     <text>{{ todos.length }} items left</text>
     <text>Clear completed</text>
  </view>
</view>



// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      input: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: true},
        {name: 'Learning HTML',completed: false}
      ]
  },
  inputChangeHandle: function(e){
    //body
    console.log(e.detail.value);
    this.setData({
      input: e.detail.value
    });
  },
  //1.先让按钮点击时 执行一段代码
  //2. 拿到文本框里面的值
  // 2.1 由于小程序的数据绑定是单向的，
  //       必须要给文本框注册改变事件
  //3. 将这个值添加到列表中
  addTodoHandle: function(){ S
     //当添加按钮点击事件发生时执行的函数
     if(!this.data.input)return
     console.log(this.data.input)     
     var todos =  this.data.todos;
     todos.push({       
         name: this.data.input,
         completed: false
      })  
     //必须显式的通过setData去改变数据，这样界面才能得到变化
     this.setData({
      todos: todos
     });
  },
  toggleTodoHandle:function(e){
    //切换当前点中的item的完成状态
    console.log(e.currentTarget);
    var item = this.data.todos[e.currentTarget.dataset.index]
    console.log(item)
    item.completed = !item.completed
    console.log(this.data.todos)
    this.setData({
       todos: this.data.todos
    })
  }
})


效果：

1dc618a0ed9580ce8bfa6facb208c08f.png


剩余任务数量展示


实现目标有3点:


1.若未选中的item的项数大于1，则 应为items left


2.如果为1，则应为item left


3.若没有可选的项，则不显示任务数量


4.注意动态切换任务数量


步骤，主要有3点:


1.定义一个leftCount属性来显示剩余未选项


2.在输入框中的+号点击的时候，添加1


3切换列表的状态时，如果选中的列表项的completed为true则是+1.否则减1


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="header">
     <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
     <input type="text" placeholder="Anything here..." value="{{input}}" bindinput="inputChangeHandle"/>
  </view>
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" 
      wx:for="{{ todos}}" bindtap="toggleTodoHandle" data-index="{{ index }}">
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16"/>
      </view>    
  </view>
  <view class="footers">
    <text>Toggle All</text>
     <text wx:if="{{ leftCount }}"> {{ leftCount }} {{leftCount > 1 ? 'items' : 'item' }} left</text>  
     <text>Clear completed</text>
  </view>
</view>
// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      input: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: true},
        {name: 'Learning HTML',completed: false}
      ],
      leftCount: 2
  },
  inputChangeHandle: function(e){
    //body
    console.log(e.detail.value);
    this.setData({
      input: e.detail.value
    });
  },
  //1.先让按钮点击时 执行一段代码
  //2. 拿到文本框里面的值
  // 2.1 由于小程序的数据绑定是单向的，
  //       必须要给文本框注册改变事件
  //3. 将这个值添加到列表中
  addTodoHandle: function(){ 
     //当添加按钮点击事件发生时执行的函数
     if(!this.data.input)return
     console.log(this.data.input)     
     var todos =  this.data.todos;  
     todos.push({       
         name: this.data.input,
         completed: false
      })  
     //必须显式的通过setData去改变数据，这样界面才能得到变化
     this.setData({
      todos: todos,
       input:'',
       leftCount: this.data.leftCount + 1  
     });
  },
  toggleTodoHandle:function(e){
    //切换当前点中的item的完成状态
    console.log(e.currentTarget);
    var item = this.data.todos[e.currentTarget.dataset.index]
    console.log(item)
    item.completed = !item.completed
    //根据当前任务额完成状态决定增加一个或者减少一个
    var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    console.log(this.data.todos)
    this.setData({
       todos: this.data.todos,
       leftCount: leftCount
    })
  }
})


删除任务逻辑


注意点：事件冒泡问题，用catchtap事件


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="header">
     <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
     <input type="text" placeholder="Anything here..." value="{{input}}" bindinput="inputChangeHandle"/>
  </view>
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" 
      wx:for="{{ todos}}" bindtap="toggleTodoHandle" data-index="{{ index }}">
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{{ index }}"/>
      </view>    
  </view>
  <view class="footers">
    <text>Toggle All</text>
     <text wx:if="{{ leftCount }}"> {{ leftCount }} {{leftCount > 1 ? 'items' : 'item' }} left</text>  
     <text>Clear completed</text>
  </view>
</view>


// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      input: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: true},
        {name: 'Learning HTML',completed: false}
      ],
      leftCount: 2
  },
  inputChangeHandle: function(e){
    //body
    console.log(e.detail.value);
    this.setData({
      input: e.detail.value
    });
  },
  //1.先让按钮点击时 执行一段代码
  //2. 拿到文本框里面的值
  // 2.1 由于小程序的数据绑定是单向的，
  //       必须要给文本框注册改变事件
  //3. 将这个值添加到列表中
  addTodoHandle: function(){ 
     //当添加按钮点击事件发生时执行的函数
     if(!this.data.input)return
     console.log(this.data.input)     
     var todos =  this.data.todos;  
     todos.push({       
         name: this.data.input,
         completed: false
      })  
     //必须显式的通过setData去改变数据，这样界面才能得到变化
     this.setData({
      todos: todos,
       input:'',
       leftCount: this.data.leftCount + 1  
     });
  },
  toggleTodoHandle:function(e){
    //切换当前点中的item的完成状态
    console.log(e.currentTarget);
    var item = this.data.todos[e.currentTarget.dataset.index]
    console.log(item)
    item.completed = !item.completed
    //根据当前任务额完成状态决定增加一个或者减少一个
    var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    console.log(this.data.todos)
    this.setData({
       todos: this.data.todos,
       leftCount: leftCount
    })
  },
  removeToDoHandle:function(e){
    var item = this.data.todos[e.currentTarget.dataset.index]
    this.data.leftCount =  item.completed ? this.data.leftCount : (this.data.leftCount - 1) ;
    this.data.todos.splice(e.currentTarget.dataset.index, 1)
    this.setData({
      todos: this.data.todos,
      leftCount: this.data.leftCount
   })
  }
})

运行效果:

1dc618a0ed9580ce8bfa6facb208c08f.png

显示已经删除:

1dc618a0ed9580ce8bfa6facb208c08f.png


切换全部任务状态(全选)


页面添加一个事件toggleAllHandle


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="header">
     <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
     <input type="text" placeholder="Anything here..." value="{{input}}" bindinput="inputChangeHandle"/>
  </view>
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" 
      wx:for="{{ todos}}" bindtap="toggleTodoHandle" data-index="{{ index }}">
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{{ index }}"/>
      </view>    
  </view>
  <view class="footers">
    <text bindtap="toggleAllHandle">Toggle All</text>
     <text wx:if="{{ leftCount }}"> {{ leftCount }} {{leftCount > 1 ? 'items' : 'item' }} left</text>  
     <text>Clear completed</text>
  </view>
</view>


js书写逻辑:


// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      input: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: true},
        {name: 'Learning HTML',completed: false}
      ],
      leftCount: 2,
      allCompleted: false
  },
  inputChangeHandle: function(e){
    //body
    console.log(e.detail.value);
    this.setData({
      input: e.detail.value
    });
  },
  //1.先让按钮点击时 执行一段代码
  //2. 拿到文本框里面的值
  // 2.1 由于小程序的数据绑定是单向的，
  //       必须要给文本框注册改变事件
  //3. 将这个值添加到列表中
  addTodoHandle: function(){ 
     //当添加按钮点击事件发生时执行的函数
     if(!this.data.input)return
     console.log(this.data.input)     
     var todos =  this.data.todos;  
     todos.push({       
         name: this.data.input,
         completed: false
      })  
     //必须显式的通过setData去改变数据，这样界面才能得到变化
     this.setData({
      todos: todos,
       input:'',
       leftCount: this.data.leftCount + 1  
     });
  },
  toggleTodoHandle:function(e){
    //切换当前点中的item的完成状态
    console.log(e.currentTarget);
    var item = this.data.todos[e.currentTarget.dataset.index]
    console.log(item)
    item.completed = !item.completed
    //根据当前任务额完成状态决定增加一个或者减少一个
    var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    console.log(this.data.todos)
    this.setData({
       todos: this.data.todos,
       leftCount: leftCount
    })
  },
  removeToDoHandle:function(e){
    var item = this.data.todos[e.currentTarget.dataset.index]
    this.data.leftCount =  item.completed ? this.data.leftCount : (this.data.leftCount - 1) ;
    this.data.todos.splice(e.currentTarget.dataset.index, 1)
    this.setData({
      todos: this.data.todos,
      leftCount: this.data.leftCount
   })
  },
  toggleAllHandle: function(){
    //this在这里永远指向的是当前页面对象
    console.log(11)
    this.data.allCompleted = !this.data.allCompleted     
    var todos = this.data.todos  
    var that = this
    todos.forEach(function(item){
      item.completed = that.data.allCompleted 
    })
    this.setData({
      todos: this.data.todos,
      leftCount:  this.data.allCompleted? 0 : todos.length 
   })
  }
})


效果：

1dc618a0ed9580ce8bfa6facb208c08f.png


全选：

5d4c6812c8535adbb050f4ddf2e1bce8.png


全不选:

46a9d80a6e05e4e3b19d57a0ee70bcdf.png


清空已完成任务


在页面定义个clearHandle方法:


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="header">
     <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
     <input type="text" placeholder="Anything here..." value="{{input}}" bindinput="inputChangeHandle"/>
  </view>
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" 
      wx:for="{{ todos}}" bindtap="toggleTodoHandle" data-index="{{ index }}">
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{{ index }}"/>
      </view>    
  </view>
  <view class="footers">
    <text bindtap="toggleAllHandle">Toggle All</text>
     <text wx:if="{{ leftCount }}"> {{ leftCount }} {{leftCount > 1 ? 'items' : 'item' }} left</text>  
     <text bindtap="clearHandle">Clear completed</text>
  </view>
</view>
// pages/todos/todos.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
      //文本框数据模型
      input: '',
      //任务清单数据模型
      todos: [
        {name: 'Learning WEAPP',completed: false},
        {name: 'Learning JavaScript',completed: true},
        {name: 'Learning HTML',completed: false}
      ],
      leftCount: 2,
      allCompleted: false
  },
  inputChangeHandle: function(e){
    //body
    console.log(e.detail.value);
    this.setData({
      input: e.detail.value
    });
  },
  //1.先让按钮点击时 执行一段代码
  //2. 拿到文本框里面的值
  // 2.1 由于小程序的数据绑定是单向的，
  //       必须要给文本框注册改变事件
  //3. 将这个值添加到列表中
  addTodoHandle: function(){ 
     //当添加按钮点击事件发生时执行的函数
     if(!this.data.input)return
     console.log(this.data.input)     
     var todos =  this.data.todos;  
     todos.push({       
         name: this.data.input,
         completed: false
      })  
     //必须显式的通过setData去改变数据，这样界面才能得到变化
     this.setData({
      todos: todos,
       input:'',
       leftCount: this.data.leftCount + 1  
     });
  },
  toggleTodoHandle:function(e){
    //切换当前点中的item的完成状态
    console.log(e.currentTarget);
    var item = this.data.todos[e.currentTarget.dataset.index]
    console.log(item)
    item.completed = !item.completed
    //根据当前任务额完成状态决定增加一个或者减少一个
    var leftCount = this.data.leftCount + (item.completed ? -1 : 1)
    console.log(this.data.todos)
    this.setData({
       todos: this.data.todos,
       leftCount: leftCount
    })
  },
  removeToDoHandle:function(e){
    var item = this.data.todos[e.currentTarget.dataset.index]
    this.data.leftCount =  item.completed ? this.data.leftCount : (this.data.leftCount - 1) ;
    this.data.todos.splice(e.currentTarget.dataset.index, 1)
    this.setData({
      todos: this.data.todos,
      leftCount: this.data.leftCount
   })
  },
  toggleAllHandle: function(){
    //this在这里永远指向的是当前页面对象
    console.log(11)
    this.data.allCompleted = !this.data.allCompleted     
    var todos = this.data.todos  
    var that = this
    todos.forEach(function(item){
      item.completed = that.data.allCompleted 
    })
    this.setData({
      todos: this.data.todos,
      leftCount:  this.data.allCompleted? 0 : todos.length 
   })
  },
  clearHandle:function(){ 
    var todos = this.data.todos.filter(function(item){
      return !item.completed
    })
     this.setData({todos: todos})
  }
})


效果:

1dc618a0ed9580ce8bfa6facb208c08f.png

点击clear Completed，只显示未完成的 任务:

5d4c6812c8535adbb050f4ddf2e1bce8.png


细节优化和总结


1：输入框中输入完成后，点击回车，就会添加


2：所有任务被清空后，不应该呈现列表和按钮


bindconfirm事件


第一个问题的处理: bindconfirm事件


1dc618a0ed9580ce8bfa6facb208c08f.png

5d4c6812c8535adbb050f4ddf2e1bce8.png


呈现问题–block


根据todos有没有数据，有数据就呈现todo列表和footer，没有就不显示


<!--pages/todos/todos.wxml-->
<view class="container">
  <view class="header">
     <image src="../../images/plus.png" bindtap="addTodoHandle"></image>
     <input type="text" placeholder="Anything here..." value="{{input}}" bindinput="inputChangeHandle" bindconfirm="addTodoHandle"/>
  </view>
  <block wx:if="{{ todos.length }}">
  <view class="todos">
      <view class="item{{ item.completed ? ' completed' : '' }}" 
      wx:for="{{ todos}}" wx:key="{{ index }}" bindtap="toggleTodoHandle" data-index="{{ index }}">
        <icon type="{{item.completed? 'success':'circle'}}"  />
        <text>{{item.name}}</text>
         <icon type="clear" size="16" catchtap="removeToDoHandle" data-index="{{ index }}"/>
      </view>    
  </view>
  <view class="footers">
    <text bindtap="toggleAllHandle">Toggle All</text>
     <text wx:if="{{ leftCount }}"> {{ leftCount }} {{leftCount > 1 ? 'items' : 'item' }} left</text>  
     <text bindtap="clearHandle">Clear completed</text>
  </view>
  </block>
   <view wx:else>
    <text>null</text>
   </view>
</view>


看下效果:

66ba272a0bfc97be54a5fa679e3d5482.png



会发现内容不见了，显示null，大功告成!



真机演示


点击预览:

1dc618a0ed9580ce8bfa6facb208c08f.png


出现个二维码，扫码就可在手机上看到效果.

5d4c6812c8535adbb050f4ddf2e1bce8.png

完

文章标签：
JavaScript
小程序
关键词：
微信案例
微信小程序案例
微信小程序学习笔记
小程序学习笔记案例
微信小程序学习笔记todos案例
怒放de生命
目录
相关文章
開发-I88I9Z88OZ4
|
12天前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统，为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化，确保稳定运行和良好体验。最后，通过提交审核、上线运营和推广策略，吸引更多用户和商家入驻。
開发-I88I9Z88OZ4
27 3
赣州云智科技的技术铺子
|
1月前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭，快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
赣州云智科技的技术铺子
53 5
成功案例分享|使用AI运动识别插件+微搭，快速搭建AI美体运动小程序
万少！
|
1月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
万少！
19 2
万少！
|
1月前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
万少！
45 0
微信小程序 案例二 飞机大战
開发-I88I9Z88OZ4
|
29天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先，明确你的短剧平台的目标用户群体和他们的需求。比如，年轻用户可能更倾向于轻松、幽默的短剧内容，而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
開发-I88I9Z88OZ4
32 0
bruce刘晓伟-18435
|
1月前
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
bruce刘晓伟-18435
26 0
爱你三千遍斯塔克
|
4月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充，target下只有接口的编译文件，xml文件了，添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充，target下只有接口的编译文件，xml文件了，添加日志的写法
爱你三千遍斯塔克
59 0
爱你三千遍斯塔克
|
4月前
支付系统----微信支付16----创建案例项目-引入Swagger
支付系统----微信支付16----创建案例项目-引入Swagger
爱你三千遍斯塔克
25 0
爱你三千遍斯塔克
|
4月前
支付系统---微信支付14----创建案例项目---介绍，第二步引入Swagger，接口文档和测试页面生成工具，定义统一结果的目的是让结果变得更加规范，以上就是谷粒项目的几个过程
支付系统---微信支付14----创建案例项目---介绍，第二步引入Swagger，接口文档和测试页面生成工具，定义统一结果的目的是让结果变得更加规范，以上就是谷粒项目的几个过程
爱你三千遍斯塔克
46 0
朝阳39
|
4月前
|
小程序
【微信小程序】实战案例 -- 向订阅用户发送消息（范例：报名提醒）
【微信小程序】实战案例 -- 向订阅用户发送消息（范例：报名提醒）
朝阳39
263 0

热门文章

最新文章

  • 1
    小程序审核常见驳回类型
  • 2
    【小程序开发】uniapp引入iconfont图标及使用方式
  • 3
    笑联 x mPaaS | 12 个模块，全面小程序化，如何打造真正的一次开发复用多端？
  • 4
    小程序云开发联表数据查询以及云函数中的应用
  • 5
    微信公众平台小程序会是下一个App Store吗？
  • 6
    大转盘抽奖小程序源码
  • 7
    mPaaS问题之使用小程序传参数报错如何解决
  • 8
    小程序鼠标点击按钮（改变背景颜色字体）
  • 9
    初学者编译的第一个小程序
  • 10
    基于mpvue的小程序项目搭建的步骤
  • 1
    高德地图实现-微信小程序地图导航
    304
  • 2
    微信小程序封装请求
    72
  • 3
    性能工具之JMeter 微信小程序 WebSocket 脚本入门
    216
  • 4
    微信小程序用户登陆和获取用户信息功能实现
    117
  • 5
    uniapp-微信小程序-上拉和下拉触底刷新
    146
  • 6
    微信小程序和springboot实现微信支付
    218
  • 7
    微信小程序-微信支付
    68
  • 8
    微信小程序调试、断点调试
    182
  • 9
    微信小程序-分包
    68
  • 10
    开发uniapp过程中对app、微信小程序与h5的webview调试
    1114

    • 相关课程

    更多
  • IoT小程序框架课程
  • C++ 入门教程开发文档
  • 零基础学前端HTML+CSS
  • 前端开发框架Bootstrap使用教程
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • 微信广告引擎与播放节奏算法实践
  • 微信H5视频播放器在海量业务下的实践
  • 微信高效运维之路

    • 相关实验场景

    更多
  • 搭建微信小程序（AMD 8代）
  • 搭建微信小程序
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
    • 下一篇
    阿里云OSS设置跨域访问