E企盈营销工具技术服务商 热线:4006-838-530

微信小程序代码构成

E企盈直播平台营销卖货系统

QQ讨论群:785071190需要学会一种技术需要丛整体结构来了解,本文主要对微信小程序的代码结构做一个介绍。后期博文将对每一个知识做详细介绍。json、wxml、wxss、js认识小程序主要包含后缀是.js   .json    .wxml   .wxss的文件。.js文件主要完成业务逻辑并控制页面需要展现的数据,完成网络请求,用户点击事件等功能。.json主要完成应用配置或页面属性配置。.wxml类似于html,描述页面结构展示。.wxss类似于css,页面展示样式控制。appapp.js、app.json、app.wxss这三个文件是微信小程序真个应用的全局配置。小程序配置 app.jsonapp.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。 app.json 配置内容如下:{  “pages”: [    “pages/index/index”,    “pages/logs/index”  ],  “window”: {    “navigationBarTitleText”: “Demo”  },  “tabBar”: {    “list”: [{      “pagePath”: “pages/index/index”,      “text”: “首页”    }, {      “pagePath”: “pages/logs/logs”,      “text”: “日志”    }]  },  “networkTimeout”: {    “request”: 10000,    “downloadFile”: 10000  },  “debug”: true}以上所有参数在官方文档中都有详细的介绍此处不重复编写,此处给出部分相关配置实例。官网地址(https://developers.weixin.qq.com/miniprogram/dev/framework/config.html)小程序应用逻辑控制app.jsapp.js包含整个应用的生命周期函数,其中数据是全局的,可以在小程序所有js中调用,其他js中只需要通过getApp()获取app对象即可调用。以下是app.js的基本结构。官网详细介绍App({  onLaunch: function(options) {    // Do something initial when launch.  },  onShow: function(options) {      // Do something when show.  },  onHide: function() {      // Do something when hide.  },  onError: function(msg) {    console.log(msg)  },  globalData: ‘I am global data’})小程序全局样式app.wssapp.wss中定义的样式可在所有页面中使用。方便码农们统一定义样式。app.wss内容如下:/**app.wxss**/.container {  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  background-color: #bfbfbf;  padding: 200rpx 0;  box-sizing: border-box;} index.wxml如下使用:<!–index.wxml–><view class=’container’></view>Page小程序页面主要包含四个文件.js、.json、.wxml、.wxss小程序页面Page小程序页面生命周期函数在.js文件中,其中包含有onLoad、onReady、onShow、onHide、onUnload生命周期函数等。官方文档//index.jsPage({  data: {    text: “This is page data.”  },  onLoad: function(options) {    // Do some initialize when page load.  },  onReady: function() {    // Do something when page ready.  },  onShow: function() {    // Do something when page show.  },  onHide: function() {    // Do something when page hide.  },  onUnload: function() {    // Do something when page close.  },  onPullDownRefresh: function() {    // Do something when pull down.  },  onReachBottom: function() {    // Do something when page reach bottom.  },  onShareAppMessage: function () {   // return custom share data when user share.  },  onPageScroll: function() {    // Do something when page scroll  },  onTabItemTap(item) {    console.log(item.index)    console.log(item.pagePath)    console.log(item.text)  },  // Event handler.  viewTap: function() {    this.setData({      text: ‘Set some data for updating view.’    }, function() {      // this is setData callback    })  },  customData: {    hi: ‘MINA’  }})小程序页面视图小程序页面编写在.wxml文件中,此处内容比较多,后期博文会对其一一介绍。官方文档<!–index.wxml–><form bindsubmit=’submit’><view>用户名:</view><input type=’text’ name=”username”></input><view>密码:</view><input type=’text’ password=’true’ name=”password”></input><button form-type=’submit’>登陆</button></form>小程序页面配置json页面中.json文件主要是对页面标题栏,以及其他属性进行配置。官方文档{  “navigationBarTitleText”: “查看启动日志”}小程序页面样式wxss.wxss类似于css,页面展示样式控制。.log-list {  display: flex;  flex-direction: column;  padding: 40rpx;}.log-item {  margin: 10rpx;}​小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序代码构成
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏