03——微信小程序官方demo讲解——page部分

一个page由一个文件夹以及文件夹下四个文件组成。

比如一个页面叫index.则需要在pages目录下新建一个index目录,且包含由index+类型(js\wxml\wxss\json)为名组成的若干文件。文件名格式为硬性要求。

1.JS部分

1.1概述

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync(‘logs‘) || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

Page中需要传入一个config对象。

这个对象中包含一个data属性,data属性中的数据可以在展示层wxml中展示。(其他属性中的元素不可在wxml中展示)。类似于vue中的data。但是有不一样的地方。

其中vue通过为属性设置getter,setter,设置data后自动同步到视图层。小程序需要显示的调用this.setData({key:value})来更新视图。

除了data属性,类似App,还包含一系列生命周期函数,以及页面需要的事件处理函数。

如下demo:

//index.js
Page({
  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‘
  }
})

同时贴上官方的小程序逻辑层(js部分)与视图层(view层)的交互流程

1.2.路由

页面以stack的形式维护

getCurrentPages()函数可以获取到当前小程序的页面栈。

常用的切换路由的函数有:

navigateTo、redirectTo、switchTab、reLaunch。详情可参考文档

1.3模块化

//文件A:
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye;

//文件B:
var common = require(‘common.js‘)

//require暂不支持绝对路径

详情参考:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/module.html

2.WXML(视图层):

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/data.html

3.JSON配置

4.WXSS

1.小程序的样式使用rpx作为单位。以自动适配不同的机型。

  • rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

建议以iphone6作为设计稿,程序员可以直接按设计稿中的尺寸。以rpx作为单位布局。

2.推荐使用flex布局。

3.小程序不支持web常用的html标签。仅支持view以及嵌套一些组件。

5.一些常用组件

类似于web开发。小程序中有一套自己的组件。

常用的组件有:

  view组件(类似div)。

  text组件 (类似span)。

  以及一些表单组件。input、textarea、button、radio、checkbox等。

详见文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/view.html

原文地址:https://www.cnblogs.com/whiteHome/p/8595527.html

时间: 2024-10-01 03:51:57

03——微信小程序官方demo讲解——page部分的相关文章

02——微信小程序官方demo讲解——app部分

第一节讲了目录结构,这节主要讲解下目录中app.js部分. 它由三部分组成app.js.app.json与app.wxss 1.JS部分 1.1概述 //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success

01——微信小程序官方demo讲解——文件结构

1.环境概览 首先环境配置的部分略过,打开小程序开发工具.选择一个空目录,即可开始一个demo项目. 其中新建成功后的目录如图所示: 2.文件结构描述 如图所示,左边是界面展示,右边是目录结构. 目录大体分为3部分:app部分.pages部分.其他部分. app主要放置一些全局性的变量以及配置.就相当于浏览器中的windows.node中的global. pages中放的是一个一个的页面.一个页面由一个文件夹组成,文件夹内由四部分组成,js,wxml,wxss,json. 其中js主要是该页面的

Mac上微信小程序官方开发工具卡死的问题

Mac上微信小程序官方开发工具打开后卡死,无法操作,也关不掉,解决方案: 三步: 1.在应用中删除"微信web开发者工具" 2.删除一下几个配置和缓存文件: 1.-/Library/Application Support/微信web开发者工具 2.~/Library/Preferences/com.tencent.wechat.devtools.plist 3.~/Library/Caches/微信web开发者工具 3.重新安装"微信web开发者工具"

weapp微信小程序初探demo

https://github.com/donglegend/weapp-demo 参考文档开发工具安装微信weapp API git项目源码微信小程序 demo效果展示效果预览

微信小程序--每个独立的page的page.json只能修改window属性

就是主配置中的app.json中的window:

微信小程序开发交流与推广

一.请加微信群: 请扫描下方的二维码加“微信小程序交流推广群”,由于微信群的限制,超过 100 人就不能扫码加群,大家可以先添加微信号:us9488 并备注“微信小程序”,然后拉你入群. 二.官方文档: 微信小程序介绍 微信小程序设计指南 微信小程序开发文档 微信小程序运营规范 微信小程序开发者社区 三.微信小程序解决方案: 微信小程序会话管理场景 微信小程序文件上传下载应用场景 微信小程序WebSocket长连接应用场景 微信小程序视频应用场景 四.代码: 会话管理场景 文件上传下载应用场景

微信小程序导航:官方工具+精品教程+DEMO集合+最新资讯

10月15日更新: 官方手册在线版及本地版 W3C微信小程序使用手册:http://www.w3cschool.cn/weixinapp/wgt21q8k.html微信小程序官方开发文档chm版下载 :http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=44微信小程序开发帮助手册:http://wxapp.dreawer.com/forum.php?mod=viewthread&tid=45 10月14日更新: 免费视频集合: 微信小

5款微信小程序开发工具使用报告,微信官方开发工具还有待提升

微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊 很多必备的快捷键都没有,比如全选关键字.快速复制一行等等 颜色主题不能选?不喜欢白色风格怎么搞 没有插件 没有插件 没有插件 重要的事情说三遍 无奈笔者走上了尝试各种IDE的旅途,现在说一下笔者对于IDE的需求或者设想: 轻量级:我不喜欢那种类似Eclipse的庞然大物,即使出现类似工具我也不会去使用

微信小程序开发者工具包(官方版)

1月9日,微信小程序上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序.值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换.用户使用过的小程序,将以列表的方式呈现在小程序TAB中. 下面话不多说:微信小程序开发者工具包下载地址 好了!工具在这里了!大家可能会问,这工具怎么用啊!别急!其实微信公众号官方它是有教程的.因为太多!这里我就不多说了. 我把网址放在下面,大家