• 简书网微信公众号二维码
您当前的位置: 首页 > 知识百科 > 小程序的后端用哪个框架好,小程序后端框架详解

小程序的后端用哪个框架好,小程序后端框架详解

时间:2023-07-01 14:05 阅读数:101 人阅读 分类:知识百科

  开发微信小程序必须用到小程序框架,有很多小程序开发者询问小编小程序的后端用哪个框架好,在搜索了相关资料之后,小编觉得小程序全局框架是最适用的,接下来就为大家详细介绍一下这个小程序框架的相关资料及开发代码。

  1.框架概述

  2.小程序项目目录结构

  全局配置主要设置一些全局的应用参数,全局的样式等。

  3. 框架中的json配置

  3.1 全局json文件app.json

  /*app.json可配置的小程序布局参数: 1.pages:配置程序页面路径 2.window:设置窗口的表现样式 3.tabBar:设置导航tab表现样式 4workTimeout:设置网络超时时间 5.debug:设置是否开启debug模式(开发时使用) */ { /*页面配置,全局的页面必须在这里声明,否则后面使用时将找不到*/ "pages":[ "pages/index/index", "pages/logs/logs", "pages/music/music", "pages/game/game" ], "window":{ "backgroundTextStyle":"light",//下拉背景字体 loading图片样式 "navigationBarBackgroundColor": "#fff",//导航栏背景颜色 "navigationBarTitleText": "WeChat",//小程序导航栏文字 "navigationBarTextStyle":"black",//导航栏标题颜色 "backgroundColor": "#ffffff",//窗口背景色 "enablePullDownRefresh": true //是否开启下拉刷新 }, "tabBar": { /*设置导航栏tab选项list*/ "list": [ { "pagePath": "pages/index/index",//链接路径 "text": "首页",//tab导航文字 "iconPath":"/image/wechat.png",//tab图标 "selectedIconPath":"/image/wechat.png"//选中图标 }, { "pagePath": "pages/music/music", "text": "音乐", "iconPath":"/image/wechat.png", "selectedIconPath":"/image/wechat.png" }, { "pagePath": "pages/game/game", "text": "游戏", "iconPath":"/image/wechat.png", "selectedIconPath":"/image/wechat.png" }, { "pagePath": "pages/logs/logs", "text": "文学", "iconPath":"/image/wechat.png", "selectedIconPath":"/image/wechat.png" } ], "borderStyle":"black",//边框颜色 "position":"top"//tab位置,top/bottom }, "networkTimeout": { "request": 20000,//wx.request(request请求)的超时时间 "connectSocket": 20000,//wx.connectSocket(socket请求)的超时时间 "uploadFile": 20000,//wx.uploadFile(上传文件)的超时时间 "downloadFile": 20000//wx.downloadFile(下载文件)的超时时间 }, "debug":true //开启debug模式,开发所用 }

  ps:json似乎不能使用注释,这里只是为了方便查看,不可在项目中加入。

  3.2 单个页面json文件page.json

  /*page.json只能简单的配置window的一些简单样式*/{ "navigationBarTitleText": "String",//设置导航栏标题文字 "navigationBarTextStyle": "white",//设置导航标题颜色 "navigationBarBackgroundColor": "#000000",//设置导航栏背景色 "backgroundColor": "#ffffff",//设置窗口背景色 "backgroundTextStyle": "dark",//设置下拉背景字体,loading图片样式 "enablePullDownRefresh": false,//设置是否开启下拉刷新 "disableScroll":false //设置是否禁止滑动}

  4.框架中的逻辑层开发

  4.1 全局js文件app.js

  //app()注册小程序,注意不能注册多个App({ //监听小程序初始化,当小程序初始化完成时会触发发,且全局只触发一次 onLaunch: function() { }, //小程序启动或者从后台进入前台时触发 onShow: function() { }, //小程序从前台进入后台时触发 onHide: function() { }, //小程序发生脚本错误,api调用失败时触发 onError: function(msg) { console.log(msg) }, //其他任意用户定义的函数 anyCustomFunc:function(){ }, //用户自定义的全局数据,可以通过var app = getApp()获取app实例,再通过app.globalData.userInfo获取数据 globalData:{ userInfo:' global data', otherCustomData:'other custom data' } })

  4.2 单个页面js文件page.js

  //获取注册的的app实例var app = getApp()//注册页面实例Page({ //页面初始化数据,视图层通过{{text}}绑定 data: { text: "This is page init data." }, //监听页面加载 onLoad: function(options) { }, //监听页面初次渲染完成 onReady: function() { }, //监听页面显示 onShow: function() { }, //监听页面隐藏 onHide: function() { }, //监听页面卸载 onUnload: function() { }, //用户下拉刷新触发监听 onPullDownRefresh: function() { }, //用户滑到底部触发监听 onReachBottom: function() { }, //用户点击右上角分享触发监听 onShareAppMessage: function () { return { title: '自定义分享标题', desc: '自定义分享描述', path: '/page/user?id=123' } }, //事件处理(自定义函数) viewTap: function() { //事件触发后,通过setData()更新页面显示数据 this.setData({ text: 'Set some data for updating view.' }) }, //用户自定义数据,最好与页面初始化数据分开 customData: { data1: 'custom data' } })

  看完上述资料,大家对于小程序的后端用哪个框架好的问题都明白了吗?文中介绍的这个框架就是最适用的了,参照文中的小程序代码,就可以进行这个小程序框架的开发,快来试试看吧!更多相关资料请关注微信小程序商店。

  

  微信小程序布局框架怎么开发?

  微信小程序第三方框架怎么开发?

  关于微信小程序开发框架,微信小程序框架搭建