微信小程序开发入门与实践
基础知识
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 viewthis.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 分钟) 会被微信主动销毁。
- 被置顶的小程序不会被微信主动销毁。
- 当收到系统内存警告也会进行小程序的销毁。
开发实践
讲了很多原理性的东西,如果没有实际实践的话,也只是一纸空谈。下面将以一个记账小程序作为开发实践,这个小程序用以记录每日花费以及具体花费说明。
在开始前,请下载小程序开发工具。
创建项目
这里因为没有申请 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 = thisloadAllRecords((list) => {var totalMoney = 0list.forEach((item) => {totalMoney += Number(item.money)}) self.setData({list, totalMoney})self.customerData.isFirstShow = falsesetTimeout(() => {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-style="font-size: 14px;"confirm-type="done" type="digit" auto-focusvalue="{{money}}"bindinput="onMoneyChanged"/></view><view class="detail-view">花费记录:<textarea class="detail-textarea"placeholder-style="font-size: 14px;"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.lengthlet 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 开发,所以只能通过开发工具进行预览了。
最终的程序运行页面如下:
本文完整代码下载:github.com/wanghongli1…
尾注
当前小程序开发的热度已然越演越烈,各种小程序层出不穷。希望本文能给正打算开发微信小程序或者对微信小程序开发感兴趣的小伙伴们带来一些帮助,感谢阅读。
作者:王洪礼
简介:百姓网 iOS 开发工程师。本文仅为作者个人观点,不代表百姓网立场。
本文在 “百姓网技术团队” 微信公众号首发,扫码立即订阅:
微信小程序开发入门与实践相关推荐
- 《微信小程序开发入门与实践》笔记 总结
小程序快捷键 格式调整 Ctrl+S: 保存文件 Ctrl+[, Ctrl+]: 代码行缩进 Ctrl+Shift+[, Ctrl+Shift+]: 折叠打开代码块 Ctrl+C Ctrl+V: 复制 ...
- 从零开始学前端第十七讲--微信小程序开发入门
微信小程序开发入门 主讲人介绍 沁修,葡萄藤技术总监 项目经验丰富,擅长H5移动项目开发. 专注技术选型.底层开发.最佳代码实践规范总结 直播录屏版 https://v.qq.com/x/page/n ...
- 《微信小程序开发入门精要》——导读
本节书摘来自异步社区<微信小程序开发入门精要>一书中的导读,作者 李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 目 录 第1章 微信小程序入门 第1章第1节 ...
- 小程序onload_微信小程序开发入门之共享账本(十四)
微信小程序开发入门之共享账本(十四) (备注:微信小程序的wxml文件相当于HTML文件,wxss文件相当于CSS文件,js文件就是JavaScript文件,数据库为NoSQL数据库,数据库脚本语言也 ...
- 《微信小程序开发入门精要》——第2章,第2.8节带边距的水平等间隔排列
本节书摘来自异步社区<微信小程序开发入门精要>一书中的第2章,第2.8节带边距的水平等间隔排列,作者 李宁,更多章节内容可以访问云栖社区"异步社区"公众号查看 2.8 ...
- 微信小程序开发入门(连载)—— 开发前的准备工作
上一篇:微信小程序开发入门(连载)-- 认识微信小程序 1. 注册小程序帐号 在微信公众平台官网首页(https://mp.weixin.qq.com)点击右上角的"立即注册"按钮 ...
- 微信小程序开发入门(连载)—— Hello World
上一篇:微信小程序开发入门(连载)-- 微信公众平台配置 3.1 微信开发者工具 前往 开发者工具下载页面 (https://developers.weixin.qq.com/miniprogram/ ...
- 微信小程序开发入门(连载)—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作 登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...
- 微信小程序开发入门(连载)—— 认识微信小程序
从今天开始,为大家开一门连载课程 --<微信小程序开发入门>. 2011 年,腾讯公司新的即时通讯社交软件微信正式上线,凭借其新颖的设计风格和良好的使用体验,微信很快就获得了大量的用户.据 ...
- 微信小程序开发入门要学哪些内容
微信小程序开发入门要学哪些内容?微信小程序需要学习的知识点:注册登录.开发工具安装.配置.样式.组件.微信小程序数据渲染.网络请求API.获取用户信息API等,了解开发者工具.原生框架.模板语法.组件 ...
最新文章
- Ghost XP基本介绍
- GCD BZOJ2818 [省队互测] 数学
- Spark streaming vs JStorm
- oracle11g-asm实例中asmlib和raw的使用问题
- CSS3实现多页签图片缩放切换效果
- [vue] vue边界情况有哪些?
- pacemaker+corosync实现集群管理
- 视觉SLAM中使用Matlab标定摄像头
- 吉林大学超星学习通04
- NDK 开发之 CMake 的使用
- SQLite3之事务机制详解
- 百兆宽带插网线只有1mb/s的下载速度问题!
- android埋点,Android自动埋点的一种实现
- python 10行代码生成词云图片(基础词云、形状词云)
- 用 GTK 来写 Hello World
- 北京妞儿找IT男图的算数思路
- Cashback [CodeForces - 940E]
- jmeter原件使用
- python网络-Socket之TCP编程(26)
- python3 列表生成式,字典生成式,generator列表生成器的应用
热门文章
- 网站从无到有--个人(第一次)搭建。服务器环境搭建 对大家有帮助那就最好-第一次发...
- Android webView嵌套h5页面 软键盘遮盖页面问题 解决方案 java kotlin
- POJ 2778 DNA Sequence(AC自动机 + 矩阵快速幂)题解
- 181106 solution
- Lesson 3 上机练习题——继承
- python模块导入的问题
- codeforces776D
- Ubuntu下编译安装OpenCV 2.4.7并读取摄像头[转]
- UIWindow statusBar消失
- C# 插件构架实战(Jack H Hansen )