pp电子

登录
免费开通
产品中心
更多服务

微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

—— 2017 ——
12/20
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2017/12/20 0:00:00 泉源：不详 作者：未知

1. 开篇导言    
  • 本节目的：通过上一节的解说，，，，相信各人对小程序框架MINA的目录结构和设置有了一定的相识 。 。。。 。。接下来将会解说视图层，，，，逻辑层及其之间的交互 。 。。。 。。
  • 目的用户：无编程履历，，，，但对微信小程序感兴趣的同砚 。 。。。 。。
  • 学习目的：相识MINA框架的视图层(View)，，，，逻辑层(App Service)，，，，及其之间的交互 。 。。。 。。
  • 案例剖析：helloworld小程序 。 。。。 。。
  • 代码下载
  • 传送门：

上一篇：微信小程序教程-入门篇【3】   
下一篇：微信小程序教程-入门篇【5】   

  • 备注：有编程履历或看过微信官网浅易教程的同砚，，，，请酌情略过该章节 。 。。。 。。

2. MINA结构基础
从某种水平来来讲，，，，我们可以把MINA的结构简化如下图：
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

view？？？？椋喝险鎁I显示 。 。。。 。。它由开发者编写的wxml，，，，wxss及微信提供的相关组件来组成 。 。。。 。。
service？？？？椋喝险嬗τ玫暮筇呒，，，它由小程序的 js 代码以及微信提供的相关辅助？？？？樽槌 。 。。。 。。
其中view？？？？橛蓈iew thread举行驱动，，，，service？？？？樵蛴葾ppService Thread举行驱动 。 。。。 。。我们说view？？？？楹蛃ervice？？？？橹涞慕换ィ，，，着实指的是线程间的交互 。 。。。 。。
一个小程序只有一个 service 历程，，，，它在程序生命周期内后台运行 。 。。。 。。当小程序进入后台一准时间，，，，或者系统资源占用过高，，，，才会被真正的销毁 。 。。。 。。

3. 案例展示
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层
上图为该项目的两个页面 。 。。。 。。左面：主页面 。 。。。 。。右面：logs页面 。 。。。 。。
下面将分为三部分对helloworld举行解说：启动流程，，，，主页面，，，，logs页面 。 。。。 。。

4. 启动流程
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层
  • 逻辑入口：app.js

app.js的代码如下：
  1. //app.js
  2.  
  3. //1. App()函数用来注册一个小程序 。 。。。 。。接受一个object参数，，，，其指定小程序的生命周期函数等 。 。。。 。。
  4. App({
  5.  
  6.   //2. 生命周期函数--监听小程序初始化,当小程序初始化完成时，，，，会触发onLaunch（全局只触发一次）  
  7.   onLaunch: function () {
  8.     //挪用API从外地缓存中获取数据
  9.     var logs = wx.getStorageSync('logs') || []
  10.     logs.unshift(Date.now())
  11.     wx.setStorageSync('logs', logs)
  12.   },
  13.  
  14.   //3. 成员要领：获取用户数据 。 。。。 。。
  15.   getUserInfo:function(cb){
  16.     var that = this
  17.     if(this.globalData.userInfo){
  18.       typeof cb == "function" && cb(this.globalData.userInfo)
  19.     }else{
  20.       //挪用登录接口
  21.       wx.login({
  22.         success: function () {
  23.           wx.getUserInfo({
  24.             success: function (res) {
  25.               that.globalData.userInfo = res.userInfo
  26.               typeof cb == "function" && cb(that.globalData.userInfo)
  27.             }
  28.           })
  29.         }
  30.       })
  31.     }
  32.   },
  33.  
  34.   //4. 全局数据
  35.   globalData:{
  36.     userInfo:null
  37.   }
  38. })
  39.  
  40. //注重：App()必需在app.js中注册，，，，且不可注册多个 。 。。。 。。
  41. //     不要在界说于App()内的函数中挪用getApp()，，，，使用this就可以拿到app实例 。 。。。 。。
  42. //     不要在onLaunch的时间挪用getCurrentPage()，，，，此时page还没有天生 。 。。。 。。
复制代码

上面的代码文件说明晰app.js文件的用处：注册App() 。 。。。 。。这内里包括两部分 。 。。。 。。
其一：生命周期函数的界说(onLaunch/onShow/onHide) 。 。。。 。。
其二：自界说函数，，，，通常用于操作全局数据或微信提供的用户等营业逻辑数据 。 。。。 。。
           全局数据 。 。。。 。。

  • 启动后的主页面：app.json

启动后的主页面，，，，凭证app.json中【pages】中的部分来决议 。 。。。 。。准备的来说，，，，谁在上面则主页面是谁 。 。。。 。。在该项目中，，，，代码如下：
  1. "pages":[
  2.     "pages/index/index",
  3.     "pages/logs/logs"            
  4.   ],
复制代码
若是我们把index和logs替换位置，，，，则主页面则由上图中的左图替换为右图 。 。。。 。。代码如下：
  1. "pages":[
  2.     "pages/logs/logs",
  3.     "pages/index/index"               
  4.   ],
复制代码


5. 主页面
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

上图形貌了启动后，，，，进入主页面，，，，小程序的挪用流程 。 。。。 。。

  • 文件层

找寻在路径【"pages/index/index"】中，，，，后缀为.json,.js,.wxml,.wxss的文件，，，，并举行整合 。 。。。 。。

  • 代码层

关于路由后的主页面，，，，挪用onLoad，，，，onShow 。 。。。 。。该项目中代目如下：
  1. //index.js
  2.  
  3. //1. 获取应用实例
  4. var app = getApp()
  5.  
  6. //2. Page() 函数用来注册一个页面 。 。。。 。。接受一个 object 参数，，，，其指定页面的初始数据、生命周期函数、事务处理函数等 。 。。。 。。
  7. Page({
  8.  
  9.   //3. 页面的初始数据
  10.   data: {
  11.     motto: 'Hello World',
  12.     userInfo: {}
  13.   },
  14.  
  15.   //4. 事务处理函数,当用户点击该组件的时间，，，，挪用该事务处理函数 。 。。。 。。跳转到logs页面 。 。。。 。。
  16.   bindViewTap: function() {
  17.     wx.navigateTo({
  18.       url: '../logs/logs'
  19.     })
  20.   },
  21.  
  22.   //5. 页面加载,一个页面只会挪用一次.
  23.   onLoad: function () {
  24.     console.log('onLoad')
  25.     var that = this
  26.     //挪用应用实例的要领获取全局数据
  27.     app.getUserInfo(function(userInfo){
  28.       //更新数据
  29.       that.setData({
  30.         userInfo:userInfo
  31.       })
  32.     })
  33.   }
  34.  
  35. })
  36.  
复制代码

视图层和逻辑层的交互是通过事务机制来实现的，，，，上面代码【4】所示为逻辑层的处理逻辑 。 。。。 。。事务代码在视图层如下所示：
  1. <view  bindtap="bindViewTap" class="userinfo">
  2.     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  3.     <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  4.   </view>
复制代码

如上所示，，，，从coding层面上讲，，，，事务机制由两部分组成 。 。。。 。。其一在page相关的wxml文件中 。 。。。 。。其二在.js文件中，，，，界说响应的处理函数，，，，并通过函数名举行关联识别 。 。。。 。。

6. logs页面
  • logs页面剖析

logs.js代码如下：
  1. //logs.js
  2.  
  3. //1. 加载？？？？
  4. var util = require('../../utils/util.js')
  5.  
  6. Page({
  7.  
  8.   //2. Page() 函数用来注册一个页面 。 。。。 。。接受一个 object 参数，，，，其指定页面的初始数据、生命周期函数、事务处理函数等 。 。。。 。。
  9.   data: {
  10.     logs: []
  11.   },
  12.  
  13.   //3. 页面加载,一个页面只会挪用一次.
  14.   onLoad: function () {
  15.     this.setData({
  16.       logs: (wx.getStorageSync('logs') || []).map(function (log) {
  17.         return util.formatTime(new Date(log))
  18.       })
  19.     })
  20.   }
  21.   
  22. })
  23.  
复制代码
logs.wxml如下：
  1. <!--logs.wxml-->
  2. <view class="container log-list">
  3.  
  4.   <!-- wx:for 在组件上使用wx:for控制属性绑定一个数组，，，，即可使用数组中各项的数据重复渲染该组件 。 。。。 。。-->
  5.   <!-- block wx:for 渲染一个包括多节点的结构块 。 。。。 。。-->  
  6.   <!-- 用 wx:for-item 可以指定命组目今元素的变量名 。 。。。 。。-->
  7.   <block wx:for="{{logs}}" wx:for-item="log">
  8.   
  9.     <text class="log-item">{{index + 1}}. {{log}}</text>
  10.   </block>
  11. </view>
  12.  
复制代码

  • 主页面和logs页面之间的跳转

微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

7. 小结

知识点：相识MINA框架的视图层(View)，，，，逻辑层(App Service)，，，，及其之间的交互 。 。。。 。。
              相识事务的基本使用方式 。 。。。 。。
              相识界面之间的跳转方式及栈空间 。 。。。 。。

8. 预告

相识并使用微信开发工具的调试功效 。 。。。 。。

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，若有知识产权人并不肯意我们使用，，，，若是有侵权请连忙联系 。 。。。 。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，仅系客观性形貌，，，，如您需要相识该类商品/服务详细的资讯，，，，请您直接与该类商品/服务的提供者联系 。 。。。 。。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案 。 。。。 。。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等 。 。。。 。。

KESION 一直通过手艺立异，，，，提供产品和服务，，，，助力企业向数字化转型，，，，通过科技驱动商业刷新，，，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
微信小程序 SaaS
上/下篇

  • 微信小程序教程入门篇【5】,微信开发工具的调试功效

    本帖最后由 狂兔科技 于 2016-11-1 22:21 编辑 1. 开篇导言 本节目的：通过之前的解说，，，，相信各人关于微信小程序自己有了一定的熟悉 。 。。。 。。本篇将专注于解说IDE的调试功效 。 。。。 。。 目的用户：无编程

    微信小程序SaaS 2017/12/20 0:00:00

  • 微信小程序教程入门篇【3】,MINA框架的目录结构和设置

    本帖最后由 狂兔科技 于 2016-11-1 18:10 编辑 1. 开篇导言 本节目的：通过 上一节 的解说，，，，相信各人对小程序框架MINA有了起源相识 。 。。。 。。接下来将会对其举行深入介绍 。 。。。 。。 目的用户：无编程

    微信小程序SaaS 2017/12/20 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层 -