微信小程序框架主体快速开发教程

2018-05-29 16:54

摘要:安装必要内容:首先安装nodejs:node.js下载地址安装完成之后下载微信开发者工具,进行安装

安装必要内容:

首先安装nodejs:node.js

安装完成之后下载微信开发者工具,进行安装。

本文所有内容均参考自 微信公众平台/小程序 ,官方网站写的很详细

这里只不过是为了将个人的学习过程记录,方便分享复习。

框架介绍

微信小程序框架十分简单且容易上手,分为两部分

视图层:*.wxml、*.wxss、

逻辑层:*.js   基于javascript

整个框架的核心是一种数据绑定系统,框架会使数据和视图保持同步——当逻辑层修改数据时,视图层会做相应的更新。

文件结构

小程序文件结构也很简单,一个主题app的描述以及各个页面的描述

小程序主体部分详解

app.js

在app.js中主要实现了注册一个小程序(页面名.js主要是注册页面),主要是调用了一个名为App()的函数 

其接收了一个object参数,用于指定小程序的生命周期等等...
[javascript] view plain copy
App({  
  /** 
   * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次) 
   */  
  onLaunch: function (options) {  
    console.log(生命周期函数--监听小程序初始化);  
    console.log(options.path);//打开小程序的路径  String  
    console.log(options.query);//打开小程序的query  Object  
    console.log(options.scene);//打开小程序的场景值  Number  
    console.log(options.shareTicket);//转发信息  String  
    console.log(options.referrerInfo);//当场景为由另一个小程序打开时,返回此字段 Object  
    console.log(options.referrerInfo.appId);//来源小程序的 appId   String  
    console.log(options.referrerInfo.extraData);//来源小程序传过来的数据  Object  
  },  
  /** 
   * 当小程序启动,或从后台进入前台显示,会触发 onShow 
   */  
  onShow: function (options) {  
    console.log(生命周期函数--监听小程序显示);  
  },  
  /** 
   * 当小程序从前台进入后台,会触发 onHide 
   */  
  onHide: function () {  
    console.log(生命周期函数--监听小程序隐藏);  
  },  
  /** 
   * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息 
   */  
  onError: function (msg) {  
    console.log(错误监听函数);  
  }  
  /** 
   * 其他自定义函数,全局变量 
   */  
  globalData:{  
    userName:cj,  
    userAge:998  
  }   
})  

微信小程序框架主体快速开发教程

补充A:其中onLaunch以及onShow具有相同的参数 

补充B:场景值:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/scene.html 

补充C:getApp()函数可以在其他js中获取到小程序实例,getApp().globalData.userName 

补充D:App()必须在app.js中注册,且为一;在App()中不要使用getApp(),使用this即可;onLaunch中不要调用getCurrentPages(),page还没有生成;使用getApp()获得实例后,不要调用生命周期函数

app.json

作为全局配置文件,可以配置页面的多种属性,包含有5个子元素,

pages;window;tabBar;networkTimeout;debug

注意!!:JSON文件中//注释是错误的,使用的话先要把所有注释都删除,这里加上只是为了方便理解内容

完整的配置以及全参数

[javascript] view plain copy

{  

pages: [//必须  
      pages/index/index,//小程序中每增减页面,都要对这边进行增减  
      pages/logs/index  

],  

window: {//非必须  
    navigationBarBackgroundColor: #000000,//导航栏默认颜色  
    navigationBarTextStyle: white,//导航栏标题颜色,默认白色,仅支持黑白  
    navigationBarTitleText: 微信接口功能演示,//导航栏文字内容  
    backgroundColor: #ffffff,//窗口默认背景色  
    backgroundTextStyle: dark,//下拉背景字体、loading图默认样式,仅支持dark/light  
    enablePullDownRefresh:false  //是否开启下拉刷新,默认false  
  },  
  tabBar: {//非必须,底部切换页面  
    color:,//必须/tab文字默认颜色  
    selectedColor: ,//必须/tab文字选中的颜色  
    backgroundColor: ,//必须/tab背景色  
    borderStyle: ,//tab边框颜色,默认black,仅支持黑白  
    position: bottom,//图标 top的时候则不显示  
    list: [//必须/tab列表  
      {   
        pagePath: pages/index/index,//必须/页面路径  
        text: 首页,//必须/按钮文字  
        iconPath:,//图片路径  
        selectedIconPath://选中时图片路径  
      },  
      {  
        pagePath: pages/logs/logs,  
        text: 日志  
      }  
    ]  
  },  

networkTimeout: {//非必须  设置网络请求时间  

request: 10000,//wx.request的超时时间,单位毫秒,默认为:60000  

connectSocket: 10000,//wx.connectSocket的超时时间,单位毫秒,默认为:60000  
      uploadFile: 10000, //wx.uploadFile的超时时间,单位毫秒,默认为:60000  
      downloadFile:10000 //wx.downloadFile的超时时间,单位毫秒,默认为:60000  

},  

debug: true    //非必须  是否开启debug模式  

app.wxss

全局样式组件,和css差不多

简单的根据需求配置好上面的主体部分之后,就要开始创建页面了,上面也说过,页面是由逻辑层以及视图层组成,其中js和wxml最为重要。


推荐阅读:微信小程序生命周期和传值教程    微信小程序开发教程 


参与讨论

发表评论