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

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

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


TODOS案例:

项目介绍

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

样式书写

导航栏

效果：

具体代码:

<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;
}

现在整体效果已经产生:

数据绑定

抽象数据模型

// 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>

页面效果:

界面交互操作

新增

目标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
     });
  }
})

效果:

新增逻辑优化

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

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

切换任务完成状态

在列表项上添加事件，改变选中项的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
    })
  }
})

效果：

剩余任务数量展示

实现目标有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
   })
  }
})

运行效果:

显示已经删除:

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

页面添加一个事件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 
   })
  }
})

效果：

全选：

全不选:

清空已完成任务

在页面定义个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})
  }
})

效果:

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

细节优化和总结

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

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

bindconfirm事件

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

呈现问题–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>

看下效果:

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

真机演示

点击预览:

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

完

文章标签：
小程序
JavaScript
关键词：
微信案例
微信小程序案例
微信小程序学习笔记
小程序学习笔记案例
微信小程序学习笔记todos案例
怒放de生命
目录
相关文章
恩爸编程
|
12天前
|
API 开发者
微信native支付对接案例详解
本文详细介绍了微信Native支付的对接流程，包括效果展示、产品介绍、接入前准备、开发指引、API列表、支付通知等，并强调了只有通过微信认证的服务号才能对接微信支付。每年需支付300元认证费用。
恩爸编程
26 3
開发-I88I9Z88OZ4
|
1月前
|
监控 小程序 前端开发
排队免单小程序开发源码案例
“排队免单小程序”旨在通过用户排队行为结合特定规则为用户提供免单或优惠机会，提升用户体验及商家流量。核心功能包括用户注册登录、排队管理、免单规则设置、支付与结算、商家管理和通知提醒等。技术上采用微信小程序开发框架，前后端分离架构，集成微信支付等服务，确保高效安全的数据处理与传输。项目开发过程涵盖需求分析、设计开发、集成测试和上线发布，后期注重数据监控、用户反馈和运营推广，以持续优化用户体验。
開发-I88I9Z88OZ4
40 5
開发-I88I9Z88OZ4
|
1月前
|
开发框架 小程序 测试技术
排队免单小程序开发模式案例
排队免单小程序通过线上排队系统，为用户提供便捷的免单机会。主要功能包括用户注册与登录、商家入驻与管理、排队系统、通知与提醒、活动记录与查询。技术实现涉及微信小程序原生开发框架、后端技术、API接口和第三方服务。开发过程还包括全面的测试与优化，确保稳定运行和良好体验。最后，通过提交审核、上线运营和推广策略，吸引更多用户和商家入驻。
開发-I88I9Z88OZ4
43 3
赣州云智科技的技术铺子
|
2月前
|
人工智能 小程序 搜索推荐
成功案例分享|使用AI运动识别插件+微搭，快速搭建AI美体运动小程序
今天给大家分享一个最近使用我们的“AI运动识别小程序插件”+“微搭”搭建小程序的经典案例。
赣州云智科技的技术铺子
65 5
成功案例分享|使用AI运动识别插件+微搭，快速搭建AI美体运动小程序
万少！
|
2月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
万少！
22 2
万少！
|
2月前
|
开发框架 前端开发 JavaScript
微信小游戏案例三 抓星星
微信小游戏案例三 抓星星
万少！
99 0
微信小游戏案例三 抓星星
万少！
|
2月前
|
JavaScript 小程序 前端开发
微信小程序 案例二 飞机大战
微信小程序 案例二 飞机大战
万少！
69 0
微信小程序 案例二 飞机大战
開发-I88I9Z88OZ4
|
2月前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先，明确你的短剧平台的目标用户群体和他们的需求。比如，年轻用户可能更倾向于轻松、幽默的短剧内容，而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
開发-I88I9Z88OZ4
46 0
bruce_xiaowei
|
2月前
|
人工智能 小程序 Python
Python编程小案例——编一个事件提醒弹窗小程序
Python编程小案例——编一个事件提醒弹窗小程序
bruce_xiaowei
34 0
爱你三千遍斯塔克
|
5月前
|
XML Java 数据格式
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充，target下只有接口的编译文件，xml文件了，添加日志的写法
支付系统----微信支付20---创建案例项目--集成Mybatis-plus的补充，target下只有接口的编译文件，xml文件了，添加日志的写法
爱你三千遍斯塔克
66 0

热门文章

最新文章

  • 1
    【一步步开发AI运动小程序】十五、AI运动识别中，如何判断人体站位的远近？
  • 2
    【一步步开发AI运动小程序】十六、AI运动识别中，如何判断人体站位？
  • 3
    uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
  • 4
    校园圈子论坛系统采取的PHP语音和uni账号开发的小程序APP公众号H5是否只需要4800元？是的，就是只需要4800元
  • 5
    【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态？
  • 6
    【一步步开发AI运动小程序】九、姿态辅助调试桌面工具的使用
  • 7
    为什么不加盟线下陪玩APP小程序平台，而是自建平台？
  • 8
    【一步步开发AI运动小程序】十二、自定义一个运动分析器，实现计时计数01
  • 9
    【一步步开发AI运动小程序】十、姿态动作相似度比较
  • 10
    uni-app开发AI康复锻炼小程序，帮助肢体受伤患者康复！
  • 1
    POINTS 1.5：腾讯微信开源的多模态大模型，超越了业界其他的开源视觉语言模型，具备强大的视觉和语言处理能力
    135
  • 2
    微信native支付对接案例详解
    26
  • 3
    即时通讯技术文集（第45期）：微信、QQ技术精华合集(Part2) [共14篇]
    32
  • 4
    通过标签清理微信好友：Python自动化脚本解析
    34
  • 5
    手撸了一个全自动微信清粉小工具（源码详解）
    70
  • 6
    即时通讯技术文集（第44期）：微信、QQ技术精华合集(Part1) [共14篇]
    24
  • 7
    如何在公众号里制作微信报名表
    59
  • 8
    仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
    60
  • 9
    微信小程序地图定位的核心技术与实际应用详解
    121
  • 10
    微信开发者工具里面没有企业微信模式
    46

    • 相关课程

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

    • 相关电子书

    更多
  • 《使用Serverless服务快速开发小程序》
  • 《云市场-小程序》
  • 数字乡村建设方案

    • 相关实验场景

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