微信小程序开发基本知识有哪些
本篇内容介绍了“微信小程序开发基本知识有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
基础知识
MINA 框架
为方便微信小程序开发，微信为小程序提供了 MINA 框架，这套框架集成了大量的原生组件以及 API。通过这套框架，我们可以方便快捷的完成相关的小程序开发工作。
MINA 框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，因此我们主要聚焦于数据与逻辑上。
响应的数据绑定
框架的核心是一个响应的数据绑定系统。
整个系统分为两块：视图层（View）和逻辑层（App Service），
通过框架，可以让数据与视图保持同步变得很简单。当我们修改数据的时候，只需要在逻辑层修改数据，视图层就会做相应的更新。
通过下面的例子来看：
<!--ThisisourView--><view>Hello{{name}}!</view><buttonbindtap="onChangeName">Clickme!</button>//ThisisourAppService.//RegisteraPage.Page({data:'Baixing',onChangeName:function(e){//sentdatachangetoviewthis.setData({name:'MINA'})}})以上通过框架将逻辑层数据中的 name 与视图层的 name 进行了绑定，所以在页面打开的时候会显示 "Hello Baixing!"，
当点击按钮的时候，视图层会发送 onChangeName 的事件给逻辑层，逻辑层找到对应的事件处理函数。逻辑层执行了setData()的操作，将 name 从 Baixing 变为 MINA，因为该数据和视图层已经绑定了，从而视图层会自动改变为 "Hello MINA!" 。
页面管理
框架管理小程序的页面路由，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册进框架中，其他的一切复杂的操作都交由框架处理。
基础组件
框架提供了一套基础的组件，这些组件自带微信风格的样式以及特殊的逻辑，我们通过组合基础组件，就可以很方便的创建出强大的微信小程序。详情参考微信小程序组件文档。
丰富的 API
MINA 框架提供丰富的微信原生 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'varapp=getApp()Page({data:{userInfo:{},list:[],totalMoney:0},...//加载已存的每日花费记录，且统计总共花费的金额。fetchData(){wx.showLoading({title:'加载数据中...',})varself=thisloadAllRecords((list)=>{vartotalMoney=0list.forEach((item)=>{totalMoney+=Number(item.money)})self.setData({list,totalMoney})self.customerData.isFirstShow=falsesetTimeout(()=>{wx.hideLoading()},1000)})}...})页面结构代码如下：
<!--index.wxml--><viewclass="container"><viewbindtap="bindViewTap"class="userinfo"><imageclass="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"></image><viewclass="info-view"><textclass="userinfo-nickname">{{userInfo.nickName}}</text><textclass="money-text">总花费：{{totalMoney}}元</text></view></view><viewclass="list-view"><blockwx:for="{{list}}"wx:key="*this"><viewclass="tally-cell"><textclass="detail-text">{{item.detail}}</text><textclass="money-text">{{item.money}}元</text><textclass="time-text">{{item.time}}</text></view></block></view><navigatorclass="add-button"url="../record/record"open-type="navigate">记一笔</navigator></view>2. 记录页面主要功能：
用于记录具体的花费金额以及花费详情
页面主要逻辑代码如下：
import{addNewRecord}from'../../services/tallyService.js'varapp=getApp()Page({...onSaveRecord(){letrecord={money:this.customerData.money,detail:this.customerData.detail}addNewRecord(record,(res)=>{console.log(res)wx.navigateBack({})})}})页面结构代码如下：
<!--record.wxml--><viewclass="containerrecord-view"><viewclass="money-view">金额：<inputplaceholder="请输入要记录的花费金额..."bindblur="onMoneyBlured"maxlength="10"placeholder-style="font-size:14px;"confirm-type="done"type="digit"auto-focusvalue="{{money}}"bindinput="onMoneyChanged"/></view><viewclass="detail-view">花费记录：<textareaclass="detail-textarea"placeholder-style="font-size:14px;"placeholder="请输入具体的花费详细吧..."maxlength="160"cursor-spacing="10"bindinput="onDetailChanged"/></view><buttonclass="save-button"catchtap="onSaveRecord"formType="submit"disabled="{{!canSave}}">保存</button></view>3. 记录 Dao 类
主要逻辑代码如下：
varrecords=[]import{formatTime}from'../utils/util.js'functionaddNewRecord({money,detail},callback){letid=records.lengthlettime=formatTime(newDate())letrecord={id,money,detail,time}records.push(record)if(typeofcallback==='function'){callback(true)}}functionloadAllRecord(callback){if(typeofcallback==='function'){callback(records)}}module.exports={addNewRecord,loadAllRecord}“微信小程序开发基本知识有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注主机评测网网站，小编将为大家输出更多高质量的实用文章！
上一篇：css魔法组合的示例分析
下一篇：小程序云开发能力如何开通申请