基础知识----
MINA 框架
为方便微信小程序开发,微信为小程序提供了 MINA 框架,这套框架集成了大量的原生组件以及 API。通过这套框架,我们可以方便快捷的完成相关的小程序开发工作。
MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,因此我们主要聚焦于数据与逻辑上。
响应的数据绑定
框架的核心是一个响应的数据绑定系统。
整个系统分为两块:视图层(View)和逻辑层(App Service),
通过框架,可以让数据与视图保持同步变得很简单。当我们修改数据的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
通过下面的例子来看:
<!-- This is our View --><view> Hello {{name}}! </view><button bindtap="onChangeName"> Click me! </button>
// This is our App Service.// Register a Page.Page({ data: 'Baixing', onChangeName: function(e) { // sent data change to view this.setData({ name: 'MINA' }) }})
以上通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定,所以在页面打开的时候会显示 "Hello Baixing!",
当点击按钮的时候,视图层会发送 onChangeName 的事件给逻辑层,逻辑层找到对应的事件处理函数。逻辑层执行了 setData() 的操作,将 name 从 Baixing 变为 MINA,因为该数据和视图层已经绑定了,从而视图层会自动改变为 "Hello MINA!" 。
页面管理
框架管理小程序的页面路由,可以做到页面间的无缝切换,并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册进框架中,其他的一切复杂的操作都交由框架处理。
基础组件
框架提供了一套基础的组件,这些组件自带微信风格的样式以及特殊的逻辑,我们通过组合基础组件,就可以很方便的创建出强大的微信小程序。详情参考微信小程序组件文档。
丰富的 API
MINA 框架提供丰富的微信原生 API,可以方便地调起微信提供的能力,如获取用户信息,本地存储,支付功能等。如果想了解更多,请参考微信小程序 API 文档。
小程序目录结构
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录下:
文件 | 作用 |
---|---|
app.js | 小程序启动入口文件 |
app.json | 小程序公共设置,如注册路由信息 |
app.wxss | 小程序公共样式表 |
一个小程序页面由四个文件组成,分别是:
文件 | 作用 |
---|---|
js | 页面的具体逻辑功能,如页面的分享等逻辑方法 |
wxml | 页面的结构,MINA 框架提供的各种组件便用于此 |
wxss | 页面样式表,类似 Web 开发的 CSS 文件,用于控制页面的具体显示样式 |
json | 页面配置,用以配置 MINA 框架提供的特有功能,如下拉刷新是否启用等配置信息 |
注意:以上的四个文件必须具有相同的路径和文件名。
小程序的运行机制
注意小程序是没有重启的概念的,主要的运行机制如下:
当小程序进入后台,客户端会维持一段时间的运行状态,超过一定时间后 (温馨官方文档 5 分钟) 会被微信主动销毁。
被置顶的小程序不会被微信主动销毁。
当收到系统内存警告也会进行小程序的销毁。
开发者入门学习
1.下载安装微信Web开发者工具,很贴心的支持Mac,并且教程的截图都是Mac的哦~~
2.打开开发者工具后,(网络慢的二维码可能加载很久)扫二维码后可以添加项目或导入项目,appid不会公众号的,没有内测邀请的可以不填,输入项目名称比如:HelloWorld,选择项目保存地址的时候选择一个新创建的空文件夹,如果勾选在当前目录创建 quick start项目, 它就会帮我们创建一个简易的小程序demo,方便我们学习理解
3.点击开发者工具左侧导航的“编辑”,我们可以看到这个项目,已经初始化并包含了一些简单的代码文件。在项目文件夹下看到了三个特别的文件app.js、app.json、app.wxss,其中,.js后缀的是脚本文件,.json后缀的文件是配置文件,.wxss后缀的是样式表文件。这三个文件是一个项目必不可少的文件,删除任意一个文件项目都会运行不了。
app.js: 小程序运行主要逻辑及入口,里面使用App()函数来注册一个小程序,普通页面的js文件中可以通过 getApp()函数拿到App()函数所拥有的参数,并调用其中的数据。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API,如本例的同步存储及同步读取本地数据。想了解更多可用 API,可参考 API 文档
app.json: 是小程序的全局配置文件。可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释。更多可配置项可参考配置详解。每一个小程序加载的页面,包括四个部分[js、json、wxml、wxss])都要在 pages数组中声明后才能访问, window对象中可以设置窗口的样式颜色等。
app.wxss: 是一个公共的样式文件,整个项目的每个页面都可以调用,我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则,就如一个全局的css文件。
4.在左边菜单栏中选择“编辑”,可以查看我们这个项目的文件和结构,从文件结构中我们可以看到文件类型有4种:
- js : 这就是一个JavaScript文件,只不过它是微信基于javascript封装过的,所以很多js函数是不能使用的,比如localhost.href,微信加入了很多自身的接口,比如跳转页面是: wx.navigationTo()函数。例如index.js 是页面的脚本文件,在这个文件中我们可以监听并处理页面的生命周期函数、获取小程序实例,声明并处理数据,响应页面交互事件等。
- json : 是页面的配置文件,可以配置页面头部title信息等,页面的配置文件是非必要的。当有页面的配置文件时,配置项在该页面会覆盖 app.json 的 window 中相同的配置项。如果没有指定的页面配置文件,则在该页面直接使用 app.json 中的默认配置。
- wxml : 视图结构文件,功能就像html文件差不多,用于描述页面结构,只不过它有自己独特的标签,不使用html标签。微信对wxml的全称定义也不是weixin xml,而是WeiXin MarkupLanguage,很霸气的要自成体系感。自然wxss也是WeiXin Style Sheets,一样的希望给人牛逼哄哄的感觉。
- wxss : 视图样式文件,格式跟css文件一样,他在css的基础上扩展了几个特性 比如:尺寸单位 / 样式导入
5: 项目运行过程:
第一步:加载项目根目录下的 app.js、 app.json、 app.wxss文件,同时会执行app.js文件,并触发其中的onLaunch 和 onShow 函数
第二步:加载app.json中pages数组中配置的第一个页面,作为项目的欢迎页,同时会执行对应页面js文件,并触发 onLoad / onReady 和 onShow 函数
往后:页面可以通过事件与js文件交互,比如 在标签元素上绑定点击事件,并且指向js文件中的一个函数,就能用js中的逻辑去处理这个事件了。
开发实践
讲了很多原理性的东西,如果没有实际实践的话,也只是一纸空谈。下面将以一个记账小程序作为开发实践,这个小程序用以记录每日花费以及具体花费说明。
在开始前,请下载小程序开发工具。
创建项目
这里因为没有申请 AppID,所以选择了无 AppID 开发模式。如果有要使用 AppID 进行开发,可通过微信小程序官网进行配置,这里就不细说,具体参考微信小程序官网文档说明。
开发工具的开始页面:
如上,我们填写好项目名称,选择项目目录后,点击添加项目,就进入所创建项目的开发界面,如下:
在左侧的编辑选项卡下,可以进行代码的编辑工作。
在调试选项卡下,可以进行调试工作,如断点调试、查看当前存储信息、模拟坐标等。
在项目选项卡下,可以配置当前的程序运行选项,如是切换基础库版本、生成小程序预览等。
创建页面
我们的程序主要有两个页面,一个是展示所有记账记录的首页页面,一个是添加记账的页面。在开发工具编辑选项卡下,点击添加新建,输入要创建的文件就可以了。完成后具体的目录如下:
在上面的(Pages)目录中,每个不同的页面目录下存在 4 种不同的文件格式。在基础知识部分,有讲解过不同格式具体的作用,这里不再赘述。接下来就进入实际的编码工作吧。
编写代码
1. 首页的具体功能包括:
统计花费总额
展示每次记录的概要信息
页面主要逻辑代码如下:
import { loadAllRecord, deleteRecordById} from '../../services/tallyService.js'var app = getApp()Page({ data: { userInfo: {}, list: [], totalMoney: 0 }, ... // 加载已存的每日花费记录,且统计总共花费的金额。 fetchData() { wx.showLoading({ title: '加载数据中...', }) var self = this loadAllRecords((list) => { var totalMoney = 0 list.forEach((item) => { totalMoney += Number(item.money) }) self.setData({list, totalMoney}) self.customerData.isFirstShow = false setTimeout(() => { wx.hideLoading() }, 1000) }) } ...})
页面结构代码如下:
<!--index.wxml--><view class="container"> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <view class="info-view"> <text class="userinfo-nickname">{{userInfo.nickName}}</text> <text class="money-text">总花费:{{totalMoney}}元</text> </view> </view> <view class="list-view"> <block wx:for="{{list}}" wx:key="*this"> <view class="tally-cell"> <text class="detail-text">{{item.detail}}</text> <text class="money-text">{{item.money}}元</text> <text class="time-text">{{item.time}}</text> </view> </block> </view> <navigator class="add-button" url="../record/record" open-type="navigate">记一笔</navigator></view>
2. 记录页面主要功能:
用于记录具体的花费金额以及花费详情
页面主要逻辑代码如下:
import {addNewRecord} from '../../services/tallyService.js'var app = getApp()Page({ ... onSaveRecord() { let record = { money: this.customerData.money, detail: this.customerData.detail } addNewRecord(record, (res)=>{ console.log(res) wx.navigateBack({}) }) }})
页面结构代码如下:
<!--record.wxml--><view class="container record-view"> <view class="money-view"> 金额: <input placeholder="请输入要记录的花费金额..." bindblur="onMoneyBlured" maxlength="10" placeholder- confirm-type="done" type="digit" auto-focus value="{{money}}" bindinput="onMoneyChanged"/> </view> <view class="detail-view"> 花费记录: <textarea class="detail-textarea" placeholder- placeholder="请输入具体的花费详细吧..." maxlength="160" cursor-spacing="10" bindinput="onDetailChanged"/> </view> <button class="save-button" catchtap="onSaveRecord" formType="submit" disabled="{{ !canSave }}"> 保存 </button></view>
3. 记录 Dao 类
主要逻辑代码如下:
var records = []import {formatTime} from '../utils/util.js'function addNewRecord({money, detail}, callback) { let id = records.length let time = formatTime(new Date()) let record = {id, money, detail, time} records.push(record) if (typeof callback === 'function') { callback(true) }}function loadAllRecord(callback) { if (typeof callback === 'function') { callback(records) }}module.exports = { addNewRecord, loadAllRecord}
预览
如果是通过填写 AppID 进行开发,在开发工具的项目选项卡下,点击预览即可生成当前小程序二维码。然后使用具有开发者或体验者权限的微信帐号扫一扫二维码,即可真机操作小程序。具体设置如下图所示:
我这里因为是通过无 AppID 开发,所以只能通过开发工具进行预览了。
最终的程序运行页面如下:
微信小程序开发入门与实践的更多相关文章
-
微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
-
微信小程序开发入门篇
本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的& ...
-
微信小程序开发入门首选
推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发,微信小程序开发,都用得着. 推荐一本书吧,直接上图,微信开发,微信网页开发, ...
-
微信小程序开发-入门到熟练(wepy-初级篇)
Title:最近做完了项目,review代码的同时,就想写一篇详细的小程序开发经历,记录自己的项目从0到1的过程 Desc : 小程序从0到1,从小白到完成项目,你需要这样做: step1: 基础知识 ...
-
小程序开发-微信小程序开发入门
分享一个微信小程序开发的基本流程,仅供参考. 第一步:注册微信小程序公众号,注册成功后,登录微信公众号管理后台,等待下一步操作. 第二步:进入微信小程序的后台后,下载微信内置的微信小程序开发者工具,以 ...
-
微信小程序开发入门(一)
小程序学习入门--(一) 最近自己学习微信小程序的过程当中自己总结出来的知识点,我会不断地更新和完善! 小程序的开发工具 一台电脑 熟悉HTML.CSS.JS基本语法 开发工具: 微信web开发者工 ...
-
微信小程序开发入门
微信小程序 首先说下结构吧,看看小程序到底长什么样子 这是一个微信提供的自己的开发工具,相当于xcode吧,由此也可以看出腾讯的野心并不小啊,左边的就是编辑调试什么的,往右就是一个模拟器,你可以选择i ...
-
微信小程序-开发入门
微信小程序已经火了一段时间了,之前一直也在关注,就这半年的发展来看,相对原生APP大部分公司还是不愿意将主营业务放到微信平台上,以免受制于腾讯,不过就小程序的应用场景(用完即走和二维码分发等)还是很值 ...
-
微信小程序开发入门:10分钟从0开始写一个hello-world
小程序开发需要三个描述整体程序的app文件 和 一个描述多个页面的 pages文件夹. (1)三个app文件分别是app.js,app.json,app.wxss. app.js文件是脚本文件处理一些 ...
随机推荐
-
jQuery常用方法和函数
jQuery 事件 bind() 方法:被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数 $(selector).bind({event:function, event:function ...
-
HAProxy学习笔记
HAProxy:著名的负载均衡器,工作于用户空间的服务程序,其有两种工作模式: TCP mode:四层调度(模拟实现,依赖于socket进行通信) HTTP mode:七层调度 目前维护的稳定版本分支 ...
-
IDEA使用(1)intellIJ idea 配置 svn
以前开发工具一直用的是Eclipse/MyEclipse,虽然早就听说过Idea而且也尝试用过几次, 说实话一开始使用idea真是很不习惯,不只是快捷键不同:比如项目和模块.服务器(如Tomcat)配 ...
-
PPT文档页数显示的增加和更新
在PPT的右下角增加页数的显示能够帮助演讲者把握进度,所以会经常遇到需要把页数显示在右下角的情况,这次在制作ppt的时候也遇到了.因此在这里总结一下设置方法. 一.在右下角显示当前页数和总页数 1)获 ...
-
CAS单点登录配置
见http://download.csdn.net/detail/u010786672/6942715下载.
-
初始block,关于定义的几个小题目
block的定义和C语言指针函数非常相似,就可以照着指针函数的方法去依葫芦画瓢就可以了 block中的^只是用来表示这是一个block对象,和函数指针中的*作用一样,只是一个标识符 下面有三个小例子来 ...
-
[bzoj 1004][HNOI 2008]Cards(Burnside引理+DP)
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1004 分析: 1.确定方向:肯定是组合数学问题,不是Polya就是Burnside,然后题目上 ...
-
Django Template模板
Django Template 你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python 代码之中. 下面我们来调用html views def ind ...
-
ASP MVC之参数传递
1.URL获取参数 Request.QueryString["XqType"]; 2.表单提交,control层获取参数:Request.Form["XXX" ...
-
关于t00ls的挂机脚本
0x00 前言 今天早上发现t00ls上有人发了个挂机脚本,二十四小时刷时间以及刷Tubi. 轻轻松松升级,坐收Tubi成富翁. 代码很简单,就是带上cookie每隔一段时间(比如60秒)去请求一下某 ...