微信小程序快速上手:小程序主体部分详解

安装必要内容:

首先安装nodejs:node.js下载地址

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

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

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

框架介绍

微信小程序框架十分简单且容易上手,分为两部分
视图层:*.wxml、*.wxss、
逻辑层:*.js   基于javascript

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



文件结构

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

例——官方Demo文件目录:

小程序主体部分详解


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差不多

直接参考官方文档即可:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html


ok,简单的根据需求配置好上面的主体部分之后,就要开始创建页面了,上面也说过,页面是由逻辑层以及视图层组成,其中js和wxml最为重要,下一个part会对逻辑层或者视图层进行分析,做一个简单的demo


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

本文作者2017-9-14 00:09
众观小程序
粉丝0 阅读12 回复0
上一篇:
微信小程序实现页面数据显示发布时间:2017-09-14
下一篇:
短信验证功能的实现发布时间:2017-09-15

精彩阅读

排行榜

小程序互动交流社区
181-2013-0473
周一至周五 9:00-18:00
意见反馈:79354359@qq.com

扫一扫联系我们