首页 > 课堂 > 小程序 > 正文

微信小程序入门教程之构建一个简单TODOS应用

2020-03-21 16:23:51
字体:
来源:转载
供稿:网友

最近,由于工作需要开始了解微信小程序,虽然小程序已经出了很久了,刚出的那段时间很火,看到很多关于小程序的技术文章,不过现在似乎没那么火了,anyway,我们还是可以学习下的。

一、了解微信小程序

1.理念:小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

2.框架:框架的核心是一个响应的数据绑定系统。整个系统分为两块视图层(View)和逻辑层(App Service),框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。

3.相关资料:调试工具下载,简易教程

初步了解这些基本信息后,我们先来看下TODOS这个应用做出来的最终效果

 

功能演示:

微信小程序,小程序开发,TODOS,应用

目录结构:

微信小程序,小程序开发,TODOS,应用

主要功能模块为:

index页面,新建任务,可完成增删等操作
los页面,记录在index页面的操作

下面我们详细介绍下

三、代码详解

1.简单配置app.json文件:

  1. {
  2. "pages":[
  3. "pages/index/index", // 设置页面路径,项目打开后找到这个路径下的文件
  4. "pages/logs/logs"
  5. ],
  6. "window":{ // 设置默认页面的窗口表现
  7. "backgroundTextStyle":"light",
  8. "navigationBarBackgroundColor": "#fff",
  9. "navigationBarTitleText": "TODOS",
  10. "navigationBarTextStyle":"black"
  11. },
  12. "tabBar": { // 设置底部tab的表现
  13. "borderStyle": "white",
  14. "backgroundColor": "#f5f5f5",
  15. "selectedColor": "#222",
  16. "list": [ // 对应底部下面两个菜单项;TODOS和LOGS
  17. {
  18. "pagePath": "pages/index/index",
  19. "text": "TODOS",
  20. "iconPath": "images/home.png",
  21. "selectedIconPath": "images/home-actived.png"
  22. },
  23. {
  24. "pagePath": "pages/logs/logs",
  25. "text": "LOGS",
  26. "iconPath": "images/note.png",
  27. "selectedIconPath": "images/note-actived.png"
  28. }
  29. ]
  30. }
  31. }

2.app.js和app.wxss文件

App() 函数用来注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。App() 必须在 app.js 中注册,且不能注册多个。
示例代码

  1. App({
  2. onLaunch: function() {
  3. // Do something initial when launch.
  4. },
  5. onShow: function() {
  6. // Do something when show.
  7. },
  8. onHide: function() {
  9. // Do something when hide.
  10. },
  11. onError: function(msg) {
  12. console.log(msg)
  13. },
  14. globalData: 'I am global data'
  15. })

在这个项目中不需要加什么代码在App({})中,所以文件中只有一个App({})

app.wxss文件主要可以设置一些全局样式

 

  1. page {
  2. height: 100%;
  3. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  4. }

3.注册页面Page

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。


一.初始化数据

 

	
  1. // ===== 页面数据对象 =====
  2. data: {
  3. input: '',
  4. todos: [],
  5. leftCount: 0,
  6. allCompleted: false,
  7. logs: [],
  8. addOneLoading: false,
  9. loadingHidden: true,
  10. loadingText: '',
  11. toastHidden: true,
  12. toastText: '',
  13. clearAllLoading: false
  14. },

初始化数据作为页面的第一次渲染。data将会以JSON的形式由逻辑层传至渲染层,其数据可以是:字符串,数字,布尔值,对象,数组。

渲染层可以通过WXML对数据进行绑定。

<input class="new-todo" value="{{ input }}" placeholder="Anything here..." auto-focus bindinput="inputChangeHandle" bindchange="addTodoHandle"/>
如上述代码中的input.

二.生命周期函数

  1. // ===== 页面生命周期方法 =====
  2. onLoad: function () {
  3. // 从缓存获取任务列表数据,并用setData设置
  4. var todos = wx.getStorageSync('todo_list') // 调用 WX API 从本地缓存中获取数据
  5. if (todos) {
  6. var leftCount = todos.filter(function (item) {
  7. return !item.completed
  8.  

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表