您的位置: 首页  >  文章  >  小程序的开发介绍

小程序的开发介绍

分类: 文章 • 2023-12-19 12:26:04

app的生命周期

  • onLaunch 小程序/页面初始化完成时触发，全局只触发一次
  • onLoad 小程序/页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
  • onShow 小程序/页面显示/切入前台时触发
  • onHide 小程序/页面隐藏/切入后台时触发
  • onError 小程序/页面发生脚本错误或 API 调用报错时触发
  • 其他 如：用户定义的全局变量

调试

  • 打断点。在要调试的位置输入"debugger;" 后ctrl+s保存，即可在调试器中单步调试
  • 调试器中正在调试的整行会被框中
  • F8 跳入下一个断点  
  • F10 跳入下一步

      小程序的开发介绍

小程序模块化

  • 抽离通用方法作为通用函数
  • 构建utils-common类
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
const common = require('common.js')
Page({
  helloMINA() {
    common.sayHello('MINA')
  },
  goodbyeMINA() {
    common.sayGoodbye('MINA')
  }
})

引用

  • 引用其他wxs：

       被引用wxs提供可以被引用的方法或字段

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
}
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

       引用者

<!-- page/index/index.wxml -->

<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>
// /pages/logic.wxs

var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);
  • import。import可以在该文件中使用目标文件定义的的template。但A引用B，B引用C，A不能引用C。
<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

       在 index.wxml 中引用了 item.wxml，就可以使用item模板：

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />
  • include。可以将目标文件除了<template><wxs>外的整个代码引入，相当于是拷贝到<include> 位置
<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view>footer</view>

 

 

相关推荐