2018-03-09毅耘科技3287

小程序开发入门与实践

　　2018开启小程序的大门，很多人开始对小程序展开深入的研究，特别是不懂技术的人，不明白小程序是如何开发的，下面毅耘科技简单介绍下小程序开发入门与实践，以供大家参考。

　　MINA 框架

　　为方便微信小程序开发，微信为小程序提供了 MINA 框架，这套框架集成了大量的原生组件以及 API。通过这套框架，我们可以方便快捷的完成相关的小程序开发工作。

　　MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，因此我们主要聚焦于数据与逻辑上。

　　响应的数据绑定

　　框架的核心是一个响应的数据绑定系统。

　　整个系统分为两块：视图层（View）和逻辑层（App Service），

　　通过框架，可以让数据与视图保持同步变得很简单。当我们修改数据的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。

　　通过下面的例子来看：

<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 分钟) 会被微信主动销毁。

　　被置顶的小程序不会被微信主动销毁。

　　当收到系统内存警告也会进行小程序的销毁。

　　开发实践

　　讲了很多原理性的东西，如果没有实际实践的话，也只是一纸空谈。下面将以一个记账小程序作为开发实践，这个小程序用以记录每日花费以及具体花费说明。

　　在开始前，请下载小程序开发工具。

　　创建项目

　　这里因为没有申请 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) }) } ……})

　　页面结构代码如下：

<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({}) }) }})

　　页面结构代码如下：

<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-focus value="{{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.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 进行开发，在开发工具的项目选项卡下，点击预览即可生成当前小程序二维码。然后使用具有开发者或体验者权限的微信帐号扫一扫二维码，即可真机操作小程序。

　　以上就是小程序开发入门的一些小知识，想要了解更多相关资讯欢迎访问：http://www.webappcloud.cn/

本文标题：小程序开发入门与实践

本文网址：http://www.yiyuncloud.com/index/id/1252.html

文章标签：合肥APP开发合肥软件开发合肥o2o社区合肥商城开发合肥B2B2C商城开发

毅耘科技（www.yiyuncloud.com）是一家拥有新型网站建设与程序开发经验的公司，致力于解决企业网络服务问题，紧跟着网络变化的步伐，为企业提供网络科技服务。平台服务：品牌网站建设、网站开发、微信开发、APP开发、软件开发、网校系统开发、多用户商城开发、分销商城开发、微商城、一元云购系统开发、O2O系统开发、商标注册、网络营销等项目。是专业为企业提升价值的公司。

分享到：

←上一篇文章

下一篇文章→

搜索关键词