微信小程序的简单开发案例(记事本)

最新推荐文章于 2025-10-24 14:19:36 发布

原创

最新推荐文章于 2025-10-24 14:19:36 发布 · 1.1w 阅读

237 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序案例之简单记事本实现

我最近在学习微信小程序，主要熟悉了微信开发者工具的简单使用以及小程序的开发流程。微信小程序的学习要求不高，只要有一些web前端等知识基础即可。

1，小程序简介

微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。
开发工具下载地址：https://mp.weixin.qq.com/wiki

2，微信小程序项目结构

在这里插入图片描述

3，微信小程序案例之记事本

我在微信开发者工具中创建了一个TODOS DEMO项目这个项目的结构如下图所示。在这里插入图片描述
app.json

{
   
     "pages":[    "pages/todos/todos"      ], 
 "window":{
   
       "backgroundTextStyle":"light", 
"navigationBarBackgroundColor": "#fff",
 "navigationBarTitleText": "记事本",
 "navigationBarTextStyle":"black"  }, 
 "style": "v2",  "sitemapLocation":
 "sitemap.json"}

todos.wxml

<view class="container" ><view class="header">
<image src="../../images/plus.png" bindtap="addTodoHandle"></image>
<input type="text" placeholder="请输入..." value="{
    
    {input}}" bindinput="inputChangeHandle" bindconfirm="addTodoHandle">
</input>
</view>



<block wx:if="{
    
    {todos.length}}">
<view class="todos">
<view class="item{
    
    {item.complete?' complete':' '}}" wx:for="{
    
    {todos}}"  bindtap="toggleToHandle" data-index="{
    
    {index}}"><!--wx:for的任务就是遍历数组的对象个数-->
 <!-- 图标显示 --