精华内容
下载资源
问答
  • 微信小程序 记事本

    2018-05-26 15:34:44
    微信小程序记事本),下载直接就能用,不需要在重复的造轮子,如果你要体验小程序发布流程,下载这个直接发布审核就可以。
  • 微信小程序开发--记事本 收藏夹

    千次阅读 2018-01-21 13:37:00
    记事本微信小程序开发 这里是简单的微信小程序的开发主要实现的功能是记事本和收藏夹 1、开发环境的搭建 2、功能模块的介绍 3、代码实现

    记事本微信小程序开发

    这里是简单的微信小程序的开发主要实现的功能是记事本和收藏夹

    1、开发环境的搭建

    2、功能模块的介绍

    3、代码实现

    展开全文
  • 通过一个任务记事本小程序快速入门微信小程序开发,了解整个开发流程及技巧,学习及掌握小程序开发当中基础的,常用的一些重要知识点(如布局,样式,数据模型和绑定,与界面的交互操作,如添加,清除任务,切换任务...
  • 使用:打开微信-发现-小程序,搜索“Raid记事本”,即可使用。 v2.0.2 修复了周三不打开周四(或者其他非周三的日子)打开不会自动重置本周攻坚次数的漏洞。 添加了一个非常好用的自定义日志功能,长按角色可以打开...
  • 初体验微信小程序记事本

    千次阅读 2019-01-09 19:27:53
    最近参评需要,研究了几天小程序,写了一个记事本DEMO,先上效果图,算是一个类似于本地的记事本 1.添加记录页面 2.选择照片界面 3.检索记录界面 3.日期选择界面 4.历史记录 功能介绍: 该小程序实现记录功能,...

    最近由于项目需求,研究了几天小程序,写了一个记事本DEMO,先上效果图,算是一个类似于本地的记事本

    1.添加记录页面

    在这里插入图片描述

    2.选择照片界面

    在这里插入图片描述

    3.检索记录界面

    在这里插入图片描述

    3.日期选择界面

    在这里插入图片描述

    4.历史记录

    在这里插入图片描述

    功能介绍:

    该小程序实现记录功能,包括添加照片和关键字进行保存一条便签的功能!
    后期想法:因为小程序的后台实现是https并且域名必须是注册合法的,所以限制比较大,待后期实现

    技术介绍:

    1. 使用媒体相机添加照片或者从图库中选择
    2. 通过操作微信文件相关的API,保存记录先来的便签
    3. 通过特定条件查询和检索出相关的便签
    4. 删除和更新功能待后期完善

    注意事项

    1. 该项目也验证了网络请求,但是在请求网络的时候要注意,需要在微信小程序开发后台注册相关的域名才可以访问,并且请求方式为https。

    2. 小程序对本地的文件限制比较多,保存产生的文件都是小程序自身维护的路径,在手机的sd卡上是找不到实际路径,有点像ios的文件处理一样,所以不大建议做本地文件操作比较多的项目。

    3. 几乎用到的API都可以在官方推荐的示例中都可以找到,至于第三方的语音转文字或者记事本即文件预览,这些相关的需求,网上的解决方案也很多,待后期完善。

    如果您需要一款Android平台的记事本APP,推荐使用我自己开源并维护的一款
    https://www.jianshu.com/p/948b3b8ebadc

    本项目已全部上传至Github ,地址如下:

    https://github.com/OnexZgj/Notepad
    如果你觉得不错,请给我一个 star ,这是我最大的动力和支持!٩(๑>◡<๑)۶

    展开全文
  • 学习一下微信小程序。 教程:https://mp.weixin.qq.com/debug/wxadoc/dev/  简介:一套用来开发在手机微信上运行的app框架,不用安装 组成:结构文件wxml、样式文件wxss、js文件 ...       多项技能,好像也...
  • 微信小程序的简单开发案例(记事本)

    千次阅读 2020-06-11 22:02:11
    小黑课堂:微信小程序学习与入门开发案例(记事本) 1,小程序简介 2,微信开发者工具的使用 3,微信小程序案例之记事本

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

    我最近在学习微信小程序,主要熟悉了微信开发者工具的简单使用以及小程序的开发流程。微信小程序的学习要求不高,只要有一些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的任务就是遍历数组的对象个数-->
     <!-- 图标显示 -->
     <icon type="{{item.complete?'success':'circle'}}"></icon>
     <text>{{item.name}}</text>
      <icon type="clear" size="16" catchtap="DeleteHandle" data-index="{{index}}"></icon>  <!--图标的大小利用size属性即可调整-->
     </view>
     </view>
     <view class="footer">
     <text bindtap="toggleAllHandle">全选</text>
     <text wx:if="{{leftCount}}">{{leftCount}} {{leftCount>1?'未完成':'未完成'}} 事件</text>
     <text bindtap="clearHandle">清空完成事件</text>
     </view>
    
    </block>
    <view wx:else>
    <text>您还没有开始记录任何事件呢哦</text>
    </view>
    </view>

    todos.wxss

    .container{  border-top: 1rpx solid #e0e0e0;
    }
    .header{  border: 1rpx solid #e0e0e0;
     margin: 20rpx;
     border-radius: 10rpx; /*边框圆角平滑度*/
     box-shadow: 0 0 5px #e0e0e0; /*边框阴影*/
     display: flex;/*伸缩布局*/
     padding: 20rpx; /*内边距*/
     align-items: center; /*侧轴对其,就是说的y轴*/
     }
    .header image{ 
     width: 40rpx;
     height: 40rpx;
     margin-right: 20rpx;
         }
    .todos{
     border: 1rpx solid #e0e0e0;
     margin: 20rpx;
     border-radius: 10rpx; /*边框圆角平滑度*/ 
     box-shadow: 0 0 5px #e0e0e0; /*边框阴影*/
      }
    
    .todos .item{
     padding: 20rpx;
     border-bottom: 1rpx solid #e0e0e0;
     display: flex;
     align-items: center; /*侧轴对齐,主要用作图标对齐一致*/
     }
     .todos .item:last-child{
     /*防止最后一个项目与外边框线重合加深颜色*/  /* color: red; */
      border-bottom: 0;
      }
     .todos .item text{
      flex: 1; /*采用固比模型*/
      font-size: 35rpx;  
      color: #444; 
       margin-left: 20rpx;
        }
     .todos .item.complete text{
      color: #888;
      text-decoration: line-through; /*内容添加中划线*/
    }
     .footer{  display: flex; 
      justify-content: space-between; /*内容的一种对齐方式,元素与元素之间的缝隙是默认相等的*/
     /* justify-content: space-around; 元素与元素左右之间的缝隙是相等的 */ 
      margin: 20rpx;  
      font-size: 30rpx;
     }
    

    todo.js

    Page({
    data:{
      //文本框的数据模型
        input :'',
        //任务清单数据模型 
        todos:[
         { 
              name : '学习html', //任务名称
              complete: false //任务完成状态
          },
           { 
                name : '学习math', //任务名称
                omplete: false //任务完成状态
            }, 
             { 
                name : '学习hadoop', //任务名称  
                 complete: true //任务完成状态 
                }
             ],
       leftCount:2
    },
    //1,先让按钮点击时执行一段代码
    addTodoHandle:function(){
    //点击按钮之后执行事件
     // console.log(this.data.input) //拿到文本框的值
    if(!this.data.input) return
     var todos=this.data.todos
     todos.push({ 
     name:this.data.input, 
     complete:false, 
     allComplete:false 
      })
     wx.setStorage({
     key:"todos",
     data:todos
      })
     console.log(wx.getStorageSync('todos'))
     //必须显式的通过setData来改变数据,这样界面才会得到变化
    this.setData({todos:todos,input:'',leftCount: this.data.leftCount+1})
    },
    //2,拿到文本框里面的值
    //2.1由于小程序的数据绑定是单向的,必须要给文本注册改变事件
    inputChangeHandle:function(e){
     // console.log(e.detail)
     this.setData({ 
         input:e.detail.value
        })
    },
    toggleToHandle:function(e){
      //切换当前点中item的完成状态
      //console.log(e.currentTarget)
    var item=this.data.todos[e.currentTarget.dataset.index]
    item.complete=!item.complete
    var leftCount=this.data.leftCount+(item.complete?-1:1)
    //console.log(item)
    this.setData({todos:this.data.todos,leftCount:leftCount})
    },
    //这个方面需要注意冒泡问题
    DeleteHandle:function(e){
    //删除任务操作
    console.log(e.currentTarget)
    var todos=this.data.todos
    //item就是splice方法中删除掉的元素
    var item=todos.splice(e.currentTarget.dataset.index,1)[0] //删除数组中对象的方法,1是从固定下标开始删除几个数组元素
    var leftCount=this.data.leftCount-(item.complete?0:1)
    this.setData({todos:todos,leftCount:leftCount})
    },
    toggleAllHandle:function(){ 
     //this在这里永远指向的当前的页面对象  
     this.data.allComplete=!this.data.allComplete
     var todos=this.data.todos
     var that=this
     todos.forEach(function(item){ //for循环  
     item.complete=that.data.allComplete
     })
     var leftCount=this.data.allComplete?0:this.data.todos.length
     this.setData({todos:todos,leftCount:leftCount})
     },
     clearHandle:function(){
       var todos=[]  //定义空数组
       this.data.todos.forEach(function(item){
       if(!item.complete){
         todos.push(item)  //把所有未完成的任务存储到一个新的数组
         }  
         })
          this.setData({    todos:todos  })
          }
    })
    

    效果图演示

    在这里插入图片描述

    展开全文
  • 微信小程序开发

    2020-07-04 11:22:51
    小程序开发,开发工具下载、前期准备

    微信小程序开发基础总结

    1. 使用的开发工具:微信开发者工具,附上开发工具的下载链接,
      开发工具下载链接
      在选择开发工具时,建议下载稳定版,因为预发布版可能会存在不稳定。
      附上下载界面的 图片开发工具下载界面

    2. 前期准备
      (1)需要先注册一个邮箱,该邮箱必须是从未注册过腾讯服务的邮箱,邮箱注册成功之后
      (2)打开浏览器,在浏览器中搜索微信公众平台,或者点击下方链接直接打开
      微信公众平台
      通过微信扫码登录进入微信公众平台
      (3)微信开发者工具下载完成之后,直接安装,“傻瓜式安装”,可以自行修改安装路径。

    3. 开发工具安装成功之后,双击打开

    4. 在开发工具首页中,可以看到这样的一个页面,在该页面中,我们发现需要填写一个APPID,
      开发工具首页

    5. APPID可以通过在微信公众平台中的开发选项中的开发设置中找到自己的APPID,将其复制到开发工具首页中粘贴,点击新建,我们就成功创建了一个微信小程序了
      再此过程中,我们需要注意以下几点:
      (1)可以将APPID单独复制到一个的记事本文件中,因为之后会经 常需要用到,
      (2)在文件夹的选择上,每一个小程序需要存放在一个单独的空白文件夹中,

      今天的分享就到这里结束了,剩下的内容我们下次再说
      
    展开全文
  • 微信小程序开发实战

    千次阅读 2018-03-28 08:52:07
    小程序截图 ———————————————————分隔线————————————————————————— 小程序简介名称:随你记 功能介绍:相当于备忘录,跟手机自带的记事本功能差不多,只是更简洁高效...
  • 本文主要以使用小程序云Serverless服务开发一个记事本微信小程序为例介绍如何使用小程序云Serverless开发微信小程序记事本小程序的开发涉及到云函数调用、云数据库存储、图片存储等功能,较好地展示了小程序云...
  • 微信小程序开发入门之共享账本(四)
  • 微信小程序开发学习资料

    千次阅读 2017-09-18 14:10:16
    是其它地方看到的,不知道怎么转载到csdn上,自己收藏用的,大家看到原谅,很不错的一篇文章。 作者:初雪 ...张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) …前言:新人第一坑,跳坑指
  • 微信小程序学习记录——记事本DemoDemo框架功能实现事件绑定数据传递 Demo框架 使用微信开发者工具打开项目后,可以看到小程序的大概框架,项目文件架下由Pages,utils,app.*等文件夹及文件组成。 其中,app.json...
  • 微信小程序开发-textarea高度问题

    万次阅读 2018-04-05 18:03:09
    正在做一个记事本小程序记事自然少不了textarea组件编辑页面我的设计是上面一行标题栏,下面一行按钮操作区,中间就是textarea填充剩余空间效果如下图使用flex布局很容易就做到上述效果,一个container包含一个...
  • 写在前面--这里我借鉴了一位博客的代码,可以我忘记他的名字了,只能匿名的道声“谢谢!". 如果你看到感觉我侵犯你"版权",可以告诉我,我会及时删除相关代码。...本程序一共3页,Page1:Index...
  • 前面几篇博文,我们探索了一个普通的微信小程序的文件架构、页面元素、数据传递、页面渲染等基础层面的机制。前面的微信程序的缺点是不能对数据进行存储,没有很好的交互体验,说到底,体验除开界面的互动效果剩下的...
  • 需要注意的是,如果以前有申请过微信公众号,就不需要再重新申请小程序账号了,可以直接用公众号账号登录进行小程序开发。 e. 注册完成之后,就可以直接登录了,登录完成之后,进入“开发”—>“基本配置” f...
  • 微信小程序入门实例之记事本

    千次阅读 2017-06-24 23:03:00
    主要实现思想都在代码的注释中,项目源码见github 首先上项目目录 app.js文件代码如下: ...微信小程序,在摸索中前进,欢迎大家批评指正!   转载于:https://www.cnblogs.com/pomelott/p/7074772.html
  • 最近在熟悉微信小程序开发流程,所以做了一个系列的入门课程,从0-1进行微信小程序的搭建。本次系列课程涉及的技术:微信小程序【组件、API】+ThinkPHP+echarts+百度地图+腾讯云【智能聊天机器人】,具体的课程...
  • 微信小程序日记本Demo

    2017-09-10 00:03:11
    挺好的小程序Demo,互相学习。便于学习微信小程序开发。小程序可以上传照片、文字、图像,记录自己的生活。也可以网络小记事本来使用
  • 微信小程序案例(原创) 二 什么是微信 ​ 微信(WeChat) 是腾讯公司于2011年1月21日推出的一个为智能终端提供即时通讯服务的免费应用程序,由张小龙所带领的腾讯广州研发中心产品团队打造。微信支持跨通信运营商...
  • 主页显示预览并具备翻页能力,每份记事本需要至少有标题、时间、内容,存储在云端,并利用数据库接口实现增删改查。 在详情页面可以直接对数据进行更新。 在新增事项页面可以新增一条数据。 再给一张师兄最初设计的...
  • 新手入门教程!1 天学会微信小程序开发,快速上手。 当前内容版权归码字科技所有并授权显示,盗版必究。阅读原文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,189
精华内容 875
关键字:

微信小程序开发记事本

微信小程序 订阅