微信小程序开发,线程架构与开发步骤解析

2018/4/19 18:59:52
摘要: 在进入到微信小程序开发阶段之前,首先我们可以通过了解它的线程架构,来分析得出创建一个小程序功能也大概的开发

在进入到微信小程序开发阶段之前,首先我们可以通过了解它的线程架构,来分析得出创建一个小程序功能页大概的开发步骤。本文先对它的现成架构进行展示与分析、说明,最后再整理出小程序功能页的开发步骤。

1、线程架构的说明与示例

  从小程序的框架目录上看,我们可以知道.js文件是页面逻辑处理层,开发者可以按照需求在app.js和page.js中添加程序在生命周期的每个阶段相应的事件。比如在页面的onLoad时进行数据的下载,onShow的时候进行数据的更新。下面贴出一些典型的代码结构:

 (1)典型的app.js代码结构如下:

App({

  onLaunch: function(){

    //启动时执行的初始化工作

  },

  onShow: function(){

    //小程序从后台进入前台时,触发执行的操作

  },

  onHide: function(){

    //小程序从前台进入后台时,触发执行的操作

  },

  globalConf: {

    indexDate:'',

    matchdata:''

  },

  dataCache:[],

  globalData:'I am global data'

})

 (2)典型的页面page.js代码结构如下:

Page({

  Data:{

    Text:'This is page data.'

  },

  onLoad: function(options){

    //页面加载时执行的初始化工作

  },

  onReady: function(){

    //页面就绪后触发执行的操作

  },

  onShow: function(){

    //页面打开时,触发执行的操作

  },

  onHide: function(){

    //页面隐藏时,触发执行的操作

  },

  onUnload: function(){

    //页面关闭时,触发执行的操作

  },

  //Event Handler

  viewTap: function(){

    this.setData({

      text:'set some data for updating view.'

    })

  },

})

 (3)app.js与page.js文件说明

 app.js文件中有3个生命周期函数:onLaunch、onShow、onHide。还有一个onError,只会在程序出现错误时触发。

 page.js文件中有5个生命周期函数:onLoad、onReady、onShow、onHide、onUnload。

image.png

一个page的生命周期从onLoad开始,整个生命周期内onLoad、onReady、onUnload这三个时间仅执行一次,而onHide和onShow在每次页面隐藏和显示时都会触发。当用户手动触发左上角的退出箭头时,小程序仅触发app.onHide,下次进入小程序时会触发app.onShow以及当前page.onShow。仅当小程序在后台运行超过一定时间未被唤起、或者用户手动在小程序的控制栏里点击退出程序、或者小程序内存占用过大被关闭时、小程序将被销毁,系统才会触发page.onUnload事件。

 (4)线程框架说明

每个小程序分为2个线程,view与appServer。其中view线程负责解析渲染页面(wxml和wxss),而appServer线程负责运行js。由于js不跑在web-view里,就不能直接操纵DOM和BOM,这就是小程序没有window全局变量的原因。

  2、开发步骤教程

(1)创建小程序实例(定义、配置及页面执行关联),即编写3个app前缀的文件,共同描述整个小程序主体逻辑、生命周期及页面构成、样式等,实例将由appServer线程运行。

(2)创建页面(页面结构与事务处理逻辑)。一个完整的小程序页面(page)是由.js、.json、.wxml、.wxss这四个文件组成,页面由view线程执行。

(3)开发示例,为Hello WXapplet添加新页面

1) 创建一个page页

image.png

2)在app.json中注册该page页的路径。

image.png

3)在适当页面的.wxml中添加该页面的入口。例如,在index.wxml中添加到demo页面入口展现的代码。

image.png

4)在index.js中添加bindViewDemo事件处理逻辑,通过demo页面的编写,实现Hello WXapplet小程序新增一个功能页。

image.png


声明:文章"微信小程序开发,线程架构与开发步骤解析"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 为什么我们都说微信小程序会火?

    微信小程序自上线以来的不温不火到现在的温温火火,可能还会在未来变得红红火火,都在验证着很多人对小程序会火的预言的正确性。为什么会有那么多人看好小程序的未来,又为什么那么多会觉得小程序终将会火?其实这些为什么,都是因为有了预兆。

  • 个人开发者如何开发微信小程序

    虽然微信小程序一开始并不支持个人开发者开发小程序,但是后来依旧放开了这一限制,只要实名认证的个人就可以成为小程序的开发者,加入到这一潮流行列当中。不过,个人开发者中有懂代码的、有技术人员支持的、当然也有没人才又不懂代码的,到底个人开发者要如何去开发微信小程序呢?这个问题值得我们来好好探讨一番。

  • 开发微信小程序时需要注意基本点有哪些

    虽说微信小程序的开发比App开发要简单得多,但是该注意的东西还是得注意,一些最基本的方面更是要注重,避免一些最基本但具有毁灭性的情况出现。那么,这些所谓的基本注意点有哪些?现在小编可以来分点述说一下。

  • 移动官网、小程序、公众号,适应哪种企业的发展?

    微信这个平台,不仅只有微信公众号、小程序这两个可以为企业营销所用的平台,还有移动官网可以用户展示企业信息资讯,也有一定的营销作用。不过,针对不同企业,这三个产品对其作用力的大小都不太一样,也就是说,每一种产品在企业的特性下,适应力都不相同

  • 微信小程序商城开发报价问题

    定制开发微信小程序商城,就会面对报价的问题,怎样的报价才是准确的、符合市场现状的?这是想要开发小程序商城的商家需要去了解的问题。站在外包开发公司的立场,小编跟大家说说一些与开发报价相关的东西。

  • 案例论证广州微信小程序开发后实现商业转化?

    微信小程序刚被开发出来的时候,是将其定位成为工具性的产品。而很多一开始开发的工具性小程序,是比较难去实现商业性转化的,很多开发者在初涉小程序的时候

江苏快3代理 江苏快3平台 湖北快3投注平台 pc蛋蛋手机官网 pc蛋蛋 湖北快3投注平台 江苏快3平台 pc蛋蛋 pc蛋蛋网址 湖北快3官网