美文网首页
小程序开发笔记

小程序开发笔记

作者: hello_water | 来源:发表于2018-03-28 20:55 被阅读179次

小程序启动

1.微信客户端在打开小程序之前,会将整个小程序代码包下载到本地。然后通过app.jsonpages字段知道当前小程序所有页面路径。打开小程序看到的第一个页面就是pages中配置的第一个页面。
2.小程序启动后,app.js中定义的App实例的onLaunch回调会被执行。

运行机制

启动机制

1.冷启动--用户首次打开或者小程序被微信主动销毁后再次打开,此时小程序需要重新加载启动。
2.热启动--用户已经打开过小程序,然后在一定时间内再次打开,不需要重新加载启动,只需要将后台态的小程序切换到前台。

运行机制

1.小程序没有重启的概念。
2.当小程序进入后台,客户端会维持一段时间的运行,超过一定时间(目前是5分钟)后会被微信主动销毁。
3.当短时间(5s)内连续收到两次以上系统内存告警,微信会主动销毁小程序。

更新机制

小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。

生命周期

  • 小程序冷启动时如果发现有新版本,将会异步下载新版本的代码包,并同时用客户端本地的包进行启动,即新版本的小程序需要等下一次冷启动才会应用上。 如果需要马上应用最新版本,可以使用 wx.getUpdateManager API 进行处理。

事件

  • bind事件绑定不会阻止冒泡事件向上冒泡(阻止捕获事件),catch事件绑定可以阻止冒泡事件向上冒泡。
  • 小程序事件绑定格式是使用key/value形式。key值构成是bind或catch加上事件类型;value是字符串,是page中定义的函数名。比如:bindtap="switchTab"也可以写成:bind:tap="switchTab"
  • capture-bind支持事件捕获,capture-catch中断捕获和阻止冒泡。

wxml

  • wxml提供了两种文件引用方式importinclude
    1.import有作用域概念,只导入目标文件中定义的template,不导入目标文件importtemplate。导入后,可以在现文件中,直接使用目标文件中定义的template
    2.include可以将目标文件除了<template/> <wxs/>外的整个代码引入,相当于拷贝到include位置。

wxss

  • 单位(rpx):开发可以按这样的比例换算:
    *rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
设备 rpx换算px (屏幕宽度/750) px换算rpx (750/屏幕宽度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx
  • imagetextarea组件都会有一个默认宽、高。

组件元素

  • 小程序中 canvas、textarea、video 等组件使用原生渲染,所以在这些组件面前使用z-index是无效的。会有什么影响?--造成点击穿透、弹窗被覆盖。
    ----使用textarea时候,如果页面上有其它的按钮、内容,textarea的height尽量不要使用autoheight。

js

  • 对数据进行格式化尽量在js中处理,尽量不要在wxml组件中处理数据!
  • 如果需要跳转到在tabBar中配置的页面,需要使用wx.switchTab,使用wx.redirectTo会无效。

自定义组件

父子组件间通信
  • 父组件向子组件传递数据

wxml数据绑定,子 Componentproperties用来接收父组件传递过来的数据,使用和data中数据一样this.data调用。
但是在子组件中修改properties中对象的值,不会影响父组件中值。在子组件中是生效的。

  • 子组件将变化数据同步给父组件

在引用子组件的时候,属性加上bindmyevent="onMyEvent"。在子组件中使用triggerEvent触发事件
用法this.triggerEvent('myevent', myEventDetail, myEventOption) ,myevent--事件名称,myEventDetail
--传递给父组件的数据(父组件需要监听的数据),myEventOption--触发事件的选项

image.png
跳转

小程序内navigateTo方式最多打开5个页面。比如已经使用navigateTo打开5个页面,再使用navigateTo打开新页面,页面不会跳转也不会报错。
navigateTo方式跳转尽量少用。

图片上传

小程序上传图片,是将文件的二进制流数据发送给服务器。每次只能上传1张。

相关文章

  • 43/666 HJDS| 微信小程序之WXML特性

    这是666计划的第43篇笔记 本微信小程序是极客时间“9小时搞定微信小程序开发”系列的笔记。 微信小程序开发框架-...

  • 潍坊小程序开发

    潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍...

  • 潍坊商城小程序开发制作

    潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍坊小程序开发潍...

  • 微信公众平台 —— 小程序Demo开发学习笔记

    小程序教程 小程序注册 作为小程序Demo开发学习笔记 不再赘述注册 、获取Appid (注意不可直接使用服务号...

  • tag 单选标签效果

    2021-04-29 [微信小程序开发笔记(九)--单选标签效果] // uniapp语法 //原生小程序的语法:...

  • 潍坊商城小程序网站开发制作

    潍坊商城小程序开发制作潍坊商城小程序开发制作潍坊商城小程序开发制作潍坊商城小程序开发制作潍坊商城小程序开发制作潍坊...

  • 微信小程序模块化开发实践

    微信小程序模块化开发实践 公众号 前栈笔记 关联阅读正版小程序开发之一:语言,生命周期与数据渲染 准备 了解微信小...

  • 42/666 HJDS| 微信小程序 之helloworld

    这是666计划的第42篇笔记 本微信小程序是极客时间“9小时搞定微信小程序开发”系列的笔记。 工具已经弄好, 第一...

  • 微信小程序-基础介绍篇

    本文属个人笔记,不做详解,仅供参考! 小程序官方简易教程 微信小程序与HTML5的区别 开发工具的不同:微信小程序...

  • 小程序Cloud开发归纳

    小程序云开发 小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小...

网友评论

      本文标题:小程序开发笔记

      本文链接:https://www.haomeiwen.com/subject/zwdxcftx.html