微信小程序开发入门案例

微信小程序入门案例

入门案例

微信小程序的开发本质上属于前端开发，主要使用JavaScript进行开发。

小程序目录结构

一个小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。小程序主体部分由三个文件组成，必须放在项目的根目录：

• app.js：必须存在，主要存放小程序的逻辑代码。
• app.json：必须存在，小程序配置文件，主要存放小程序的公共配置。
• app.wxss：非必须存在，主要存放小程序公共样式表，类似于前端的CSS样式。

小程序的页面存放在 pages 目录中。每个小程序页面主要由四个文件组成：

• js文件：必须存在，存放页面业务逻辑代码。
• wxml文件：必须存在，存放页面结构，主要是做页面布局，页面效果展示的，类似于HTML页面。
• json文件：非必须，存放页面相关的配置。
• wxss文件：非必须，存放页面样式表，相当于CSS文件。

编写和编译小程序

1). 编写

index.wxml：编写页面布局

<view class="container">
  <view>{{msg}}</view>
  <view>
    <button type="default" bindtap="getUserInfo">获取用户信息</button>
    <image style="width: 100px;height: 100px;" src="{{avatarUrl}}"></image>
    {{nickName}}
  </view>
  <view>
    <button type="primary" bindtap="wxlogin">微信登录</button>
    授权码：{{code}}
  </view>
  <view>
    <button type="warn" bindtap="sendRequest">发送请求</button>
    响应结果：{{result}}
  </view>
</view>

index.js：编写业务逻辑代码

Page({
  data: {
    msg: 'hello world',
    avatarUrl: '',
    nickName: '',
    code: '',
    result: ''
  },
  getUserInfo: function() {
    wx.getUserProfile({
      desc: '获取用户信息',
      success: (res) => {
        console.log(res);
        this.setData({
          avatarUrl: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        });
      }
    });
  },
  wxlogin: function() {
    wx.login({
      success: (res) => {
        console.log("授权码：" + res.code);
        this.setData({
          code: res.code
        });
      }
    });
  },
  sendRequest: function() {
    wx.request({
      url: 'http://localhost:8080/user/shop/status',
      method: 'GET',
      success: (res) => {
        console.log("响应结果：" + res.data.data);
        this.setData({
          result: res.data.data
        });
      }
    });
  }
});

2). 编译

点击编译按钮，进行代码编译。

3). 运行效果

• 点击“获取用户信息”按钮，获取用户头像和昵称。
• 点击“微信登录”按钮，获取授权码。
• 点击“发送请求”按钮，发送请求到后端服务器并显示响应结果。

注意：在开发阶段，需要设置不校验合法域名，否则请求可能会失败。

2.3.3 发布小程序

小程序的代码开发完毕后，需要将其发布上线，让所有用户都能使用。

1. 点击上传按钮，将代码上传到微信服务器。
2. 指定版本号并上传成功。
3. 进入微信公众平台，打开版本管理页面，提交审核。
4. 审核通过后，进行发布，变成线上版本。

一旦成为线上版本，小程序就已经发布上线，微信用户可以在微信中搜索和使用该小程序。

总结

通过以上步骤和示例代码，我们可以快速上手微信小程序的开发。微信小程序提供了丰富的开发资源和工具，帮助开发者高效地创建和发布小程序。在开发过程中，注意不同主体类型的权限差异，并遵循微信的设计指南和开发规范，以确保小程序的质量和用户体验。