小程序开发

1. 什么是小程序？小程序与传统Web应用有什么区别？

答案：小程序是一种不需要下载安装即可使用的应用，它实现了"触手可及"的梦想。

区别：

1. 入口不同：小程序通过扫码或搜索打开，Web应用通过浏览器访问
2. 运行环境不同：小程序运行在特定的小程序环境中，Web应用运行在浏览器中
3. 开发语言和框架不同：小程序使用特定的框架和API，Web应用使用标准的Web技术
4. 功能限制：小程序有更多的平台限制和审核要求
5. 性能：小程序通常有更好的性能和更快的加载速度

2. 小程序的基本架构是什么？

答案：小程序的基本架构包括：

1. 逻辑层（App Service）：处理数据和业务逻辑
2. 视图层（View）：负责页面渲染
3. 基础库：提供各种API和组件

文件类型：

• .js：逻辑文件
• .wxml：模板文件（类似HTML）
• .wxss：样式文件（类似CSS）
• .json：配置文件

3. 如何创建一个简单的小程序页面？

答案：创建小程序页面的步骤：

1. 在app.json中注册页面
2. 创建页面文件（.js, .wxml, .wxss, .json）
3. 在.js文件中定义页面逻辑
4. 在.wxml文件中编写页面结构
5. 在.wxss文件中定义页面样式

示例：

// pages/index/index.js
Page({
  data: {
    message: 'Hello, World!'
  }
})

<!-- pages/index/index.wxml -->
<view>{{message}}</view>

/* pages/index/index.wxss */
view {
  font-size: 20px;
  text-align: center;
}

4. 小程序的生命周期函数有哪些？

答案：小程序的生命周期函数包括：

应用生命周期：

• onLaunch：小程序初始化
• onShow：小程序启动或从后台进入前台
• onHide：小程序从前台进入后台

页面生命周期：

• onLoad：页面加载
• onShow：页面显示
• onReady：页面初次渲染完成
• onHide：页面隐藏
• onUnload：页面卸载

示例：

Page({
  onLoad: function(options) {
    console.log('Page loaded');
  },
  onShow: function() {
    console.log('Page shown');
  }
  // ...其他生命周期函数
})

5. 如何在小程序中进行数据绑定和事件处理？

答案：数据绑定使用双大括号语法，事件处理使用bind或catch前缀。

示例：

<view>{{message}}</view>
<button bindtap="handleClick">Click me</button>

Page({
  data: {
    message: 'Hello'
  },
  handleClick: function() {
    this.setData({
      message: 'Hello, World!'
    })
  }
})

6. 小程序的页面间通信有哪些方式？

答案：小程序页面间通信的方式：

1. 页面跳转时传参
2. 使用全局数据（App.globalData）
3. 使用本地存储（wx.setStorageSync/wx.getStorageSync）
4. 使用事件通信（getCurrentPages和setData）

示例（页面跳转传参）：

// 页面A
wx.navigateTo({
  url: '/pages/pageB/pageB?id=1&name=test'
})

// 页面B
Page({
  onLoad: function(options) {
    console.log(options.id, options.name)
  }
})

7. 如何使用小程序的组件？如何自定义组件？

答案：使用内置组件直接在WXML中引用。自定义组件需要创建组件文件并在页面中引用。

示例（自定义组件）：

// components/myComponent/myComponent.js
Component({
  properties: {
    myProperty: String
  },
  data: {
    myData: 'Some data'
  },
  methods: {
    myMethod: function() {}
  }
})

<!-- 使用自定义组件 -->
<my-component my-property="Some value"></my-component>

8. 小程序如何处理网络请求？

答案：小程序使用wx.request API进行网络请求。

示例：

wx.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(res) {
    console.log(res.data)
  },
  fail: function(error) {
    console.error(error)
  }
})

注意：小程序要求必须使用HTTPS，并且服务器域名需要在小程序管理后台配置。

9. 小程序的存储方式有哪些？

答案：小程序的存储方式包括：

1. 本地存储：wx.setStorage/wx.getStorage
2. 同步本地存储：wx.setStorageSync/wx.getStorageSync
3. 全局数据：App.globalData

示例：

// 异步存储
wx.setStorage({
  key: 'key',
  data: 'value'
})

// 同步存储
wx.setStorageSync('key', 'value')

// 全局数据
App({
  globalData: {
    userInfo: null
  }
})

10. 如何优化小程序的性能？

答案：优化小程序性能的方法：

1. 合理使用setData，避免频繁调用和传输大量数据
2. 使用分包加载
3. 及时销毁不需要的定时器和事件监听
4. 使用缓存机制
5. 优化图片资源
6. 避免不必要的重渲染
7. 使用骨架屏提高用户体验

示例（分包加载）：

{
  "pages": ["pages/index/index", "pages/logs/logs"],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }
  ]
}

这样，小程序会将packageA中的页面打包到一个单独的分包中，需要时才会加载。