用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 查看内容

微信小程序快速上手:框架以及主体

Rolan 2017-9-14 00:09

安装必要内容:首先安装nodejs:node.js下载地址安装完成之后下载微信开发者工具,进行安装 微信开发者工具下载地址 本文所有内容均参考自微信公众平台/小程序,官方网站写的很详细这里只不过是为了将个人的学习过程 ...

安装必要内容:

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

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

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

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

框架介绍

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

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


文件结构

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

例——官方Demo文件目录:

小程序主体部分详解

app.js

在app.js中主要实现了注册一个小程序(页面名.js主要是注册页面),主要是调用了一个名为App()的函数 
其接收了一个object参数,用于指定小程序的生命周期等等...

  1. [javascript] view plain copy
  2. App({
  3. /**
  4. * 当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
  5. */
  6. onLaunch: function (options) {
  7. console.log("生命周期函数--监听小程序初始化");
  8. console.log(options.path);//打开小程序的路径 String
  9. console.log(options.query);//打开小程序的query Object
  10. console.log(options.scene);//打开小程序的场景值 Number
  11. console.log(options.shareTicket);//转发信息 String
  12. console.log(options.referrerInfo);//当场景为由另一个小程序打开时,返回此字段 Object
  13. console.log(options.referrerInfo.appId);//来源小程序的 appId String
  14. console.log(options.referrerInfo.extraData);//来源小程序传过来的数据 Object
  15. },
  16. /**
  17. * 当小程序启动,或从后台进入前台显示,会触发 onShow
  18. */
  19. onShow: function (options) {
  20. console.log("生命周期函数--监听小程序显示");
  21. },
  22. /**
  23. * 当小程序从前台进入后台,会触发 onHide
  24. */
  25. onHide: function () {
  26. console.log("生命周期函数--监听小程序隐藏");
  27. },
  28. /**
  29. * 当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息
  30. */
  31. onError: function (msg) {
  32. console.log("错误监听函数");
  33. }
  34. /**
  35. * 其他自定义函数,全局变量
  36. */
  37. globalData:{
  38. userName:"cj",
  39. userAge:998
  40. }
  41. })

补充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文件中//注释是错误的,使用的话先要把所有注释都删除,这里加上只是为了方便理解内容

完整的配置以及全参数

  1. [javascript] view plain copy
  2. {
  3. "pages": [//必须
  4. "pages/index/index",//小程序中每增减页面,都要对这边进行增减
  5. "pages/logs/index"
  6. ],
  7. "window": {//非必须
  8. "navigationBarBackgroundColor": "#000000",//导航栏默认颜色
  9. "navigationBarTextStyle": "white",//导航栏标题颜色,默认白色,仅支持黑白
  10. "navigationBarTitleText": "微信接口功能演示",//导航栏文字内容
  11. "backgroundColor": "#ffffff",//窗口默认背景色
  12. "backgroundTextStyle": "dark",//下拉背景字体、loading图默认样式,仅支持dark/light
  13. "enablePullDownRefresh":false //是否开启下拉刷新,默认false
  14. },
  15. "tabBar": {//非必须,底部切换页面
  16. "color":"",//必须/tab文字默认颜色
  17. "selectedColor": "",//必须/tab文字选中的颜色
  18. "backgroundColor": "",//必须/tab背景色
  19. "borderStyle": "",//tab边框颜色,默认black,仅支持黑白
  20. "position": "bottom",//图标 top的时候则不显示
  21. "list": [//必须/tab列表
  22. {
  23. "pagePath": "pages/index/index",//必须/页面路径
  24. "text": "首页",//必须/按钮文字
  25. "iconPath":"",//图片路径
  26. "selectedIconPath":""//选中时图片路径
  27. },
  28. {
  29. "pagePath": "pages/logs/logs",
  30. "text": "日志"
  31. }
  32. ]
  33. },
  34. "networkTimeout": {//非必须 设置网络请求时间
  35. "request": 10000,//wx.request的超时时间,单位毫秒,默认为:60000
  36. "connectSocket": 10000,//wx.connectSocket的超时时间,单位毫秒,默认为:60000
  37. "uploadFile": 10000, //wx.uploadFile的超时时间,单位毫秒,默认为:60000
  38. "downloadFile":10000 //wx.downloadFile的超时时间,单位毫秒,默认为:60000
  39. },
  40. "debug": true //非必须 是否开启debug模式
  41. }

app.wxss

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: cjmust 来自: csdn

相关阅读