毅耘资讯
返回列表
小程序开发入门与实践
安徽毅耘科技有限公司,安徽app开发,合肥APP开发,小程序开发入门与实践2018-03-09毅耘科技674

小程序开发入门与实践

小程序开发入门与实践

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

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

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

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

  开发实践

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

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

  创建项目

  这里因为没有申请 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-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/index/news_detail/id/1252.html

原创网址:合肥APP开发公司<毅耘科技> 版权所有,转载标明出去,并以链接形式链接网址:www.yiyuncloud.com

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

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

分享到:

相关文章

友情链接: 惠州网站建设  网站优化排名软件  微信编辑器  
安徽毅耘科技有限公司 版权所有 Copyright © 2017 All Rights Reserved 法律声明 皖ICP备17006053号