小程序的开发介绍

桃扇骨 2022-02-17 01:28 149阅读 0赞

### app的生命周期 ###

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

### 调试 ###

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4OTE3NQ_size_16_color_FFFFFF_t_70][]

### 小程序模块化 ###

*  抽离通用方法作为通用函数
 *  构建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";

引用者

<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。

<template name="item">
      <text>{
       {text}}</text>
    </template>

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

*  include。可以将目标文件除了<template><wxs>外的整个代码引入，相当于是拷贝到<include> 位置

<include src="header.wxml" />
    <view>body</view>
    <include src="footer.wxml" />
    
    <view>header</view>
    
    <view>footer</view>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjA4OTE3NQ_size_16_color_FFFFFF_t_70]: /images/20220217/983236c417b2431c930e9646b52dac49.png