微信小程序开发笔记，收藏！！

简介

微信小程序是一种适用于微信内的应用程序框架，开发者可以使用微信开发者工具进行开发和发布，无需下载安装即可使用，具有体验好、开发便捷、易于分享等优势。本篇文章将会介绍微信小程序开发的相关知识和注意事项。

开发环境搭建

1. 下载微信开发者工具

在微信开发者工具官网下载对应操作系统的应用程序，安装后打开，即可开始开发小程序。

2. 注册小程序账号

在微信公众平台注册小程序账号，用于后期的小程序开发、上传和发布。

3. 创建小程序

在微信开发者工具中，选择新建小程序并填写相关信息，包括小程序名称、类型、AppID等，创建后即可开始编辑小程序页面。

小程序页面

小程序页面可以看作是由 WXML、WXSS 和 JavaScript 组成的网页页面，其中 WXML 类似于 HTML，用于编写小程序的结构；WXSS 类似于 CSS，用于编写小程序的样式；JavaScript 用于编写小程序的交互逻辑。

1. WXML

WXML 标签与 HTML 标签大致相似，但有些标签是微信小程序独有的，例如 <view> 标签表示一个视图容器，在小程序中常用于包裹一组其他标签；<text> 标签表示文本内容，在小程序中可以使用 `{{}}` 的语法将动态内容填充到文本中。

  <view class="container">
    <image src="{{imageUrl}}" mode="aspectFill"></image>
    <text>{{title}}</text>
  </view>

以上代码示例中，<view> 标签包含了一张图片和一段文本，其中图片的地址是动态生成的 `imageUrl`，文本的内容也是动态生成的 `title`。

2. WXSS

WXSS 语法与 CSS 语法类似，但不完全相同，例如不支持浮动和定位等属性。需要注意的是，WXSS 的属性名称是小写或中划线分隔的，例如 `font-size`，而非 `fontSize`。

  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx;
    background-color: #f0f0f0;
  }
  
  image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 100rpx;
  }
  
  text {
    font-size: 32rpx;
    color: #333;
    margin-left: 20rpx;
  }

以上代码示例中，`.container` 类设置了视图容器的布局样式，包括横向排列、居中对齐、内边距等；`image` 类设置了图片的样式，包括宽高、圆角等；`text` 类设置了文本的样式，包括字体大小、字体颜色、左边距等。

3. JavaScript

JavaScript 用于编写小程序的交互逻辑，反映到页面中就是处理用户的交互事件、动态渲染页面等。小程序内置了一些常用的 API，如获取用户信息、调用微信支付等，可以通过 `wx` 对象调用。

  // 获取 OpenID
  wx.login({
    success: function(res) {
      if (res.code) {
        wx.request({
          url: 'https://api.weixin.qq.com/sns/jscode2session',
          data: {
            appid: 'APPID',
            secret: 'SECRET',
            js_code: res.code,
            grant_type: 'authorization_code'
          },
          success: function(res) {
            console.log(res.data.openid)
          }
        })
      } else {
        console.log('登录失败！' + res.errMsg)
      }
    }
  })

以上代码示例中，通过调用 `wx.login()` 获取用户的登录凭证 `code`，然后通过 `wx.request()` 发送网络请求，获取用户的 OpenID 数据并打印在控制台中。值得注意的是，需要在小程序管理后台中配置小程序的 AppID 和 AppSecret 值。

小结

本篇文章简要介绍了微信小程序的开发环境搭建、页面结构和交互逻辑等知识点。小程序的优势在于体验好、开发便捷、易于分享等，因此在移动应用开发中具有重要的作用。未来随着人工智能、区块链等高新技术的发展，微信小程序的应用场景也将会越来越广泛。