微信小程序

1.注册账号

在微信公众平台上注册一个小程序账号。你需要提供个人或企业的相关信息。

2.下载微信开发者工具

下载地址:微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)

3.创建小程序

使用微信开发者工具创建一个新的小程序项目。你可以选择基于模板创建，或者从零开始。

4.小程序语法

• 像素单位:以iPhone6为例，2rpx等于1px

• 图片展示:aspectFit（保持宽高比缩放）

  <image  mode="aspectFit" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" />
  

• 样式编写:在wxss中编写样式

• 数据绑定

  // .js
  Page({
    data: {
      message: 'Hello, Mini Program!'
    }
  })
  
  

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

• 条件渲染

  // .js
  Page({
    data: {
      isShow: true
    }
  })
  

  <!-- .wxml -->
  <view wx:if="{{isShow}}">显示内容</view>
  <view wx:else>隐藏内容</view>
  

• 列表渲染for

  // index.js
  Page({
    data: {
      products: [
        { name: '商品1', price: 10 },
        { name: '商品2', price: 20 },
        { name: '商品3', price: 30 }
      ]
    }
  })
  
  

  <!-- index.wxml -->
  <view wx:for="{{products}}" wx:key="index">
    <text>{{item.name}}</text>
    <text>{{item.price}}</text>
  </view>
  
  

• 事件绑定

  冒泡:bindtap,非冒泡:catchtap

  // .js
  Page({
    handleTap: function() {
      console.log('按钮被点击了');
    }
  })
  
  

  <!-- .wxml -->
  <button bindtap="handleTap">点击按钮</button>
  
  

• 自定义属性

  // index.js
  Page({
    handleClick: function(event) {
      const price = event.currentTarget.dataset.price;
      console.log('Clicked on button with price:', price);
      // 进行其他处理逻辑...
    }
  })
  
  

  <!-- index.wxml -->
  <button data-price="{{product.price}}" bindtap="handleClick">Buy Now</button>
  

• 输入框input

  <view>
    <input value="{{inputValue}}" placeholder="请输入内容" bindinput="handleInput" />
    <button bindtap="handleSubmit">提交</button>
  </view>
  
  

  Page({
    data: {
      inputValue: ''
    },
    handleInput: function(event) {
      const value = event.detail.value;
      this.setData({ inputValue: value });
    },
    handleSubmit: function() {
      const value = this.data.inputValue;
      console.log('提交内容:', value);
    }
  })
  
  

• 页面跳转

  使用navigateTo或redirectTo等API进行页面之间的跳转.

  navigateToPage函数会跳转到目标页面，并保留原页面。而redirectToPage函数则会关闭当前页面，直接跳转到目标页面。

  // .js
  Page({
    navigateToPage: function() {
      wx.navigateTo({
        url: '/pages/destination/destination'
      })
    },
    redirectToPage: function() {
      wx.redirectTo({
        url: '/pages/destination/destination'
      })
    }
  })
  
  

  // .js
  Page({
    navigateToPage: function() {
      wx.navigateTo({
        url: '/pages/destination/destination?name=John&age=25'
      })
    }
  })
  
  

• 页面传值

  // 传参 .js
  Page({
    navigateToPage: function() {
      wx.navigateTo({
        url: '/pages/destination/destination?name=John&age=25'
      })
    }
  })
  
  

  // 收参 .js
  Page({
    onLoad: function(options) {
      // options为页面跳转时传递的参数对象
      console.log(options.name); // 输出：John
      console.log(options.age); // 输出：25
    }
  })
  
  

• 生命周期

  // .js
  Page({
  
    /**
     * 页面的初始数据
     */
    data: {
  
    },
  
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
  
    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
  
    }
  })
  

• 接口调用

  接口调用一般放在生命周期函数: 加载 onLoad, 下拉刷新 onPullDownRefresh, 上拉加载 onReachBottom

5.设计界面

• 使用微信开发者工具进行前端界面设计，包括页面布局、样式设计和交互效果。可以使用HTML、CSS和JavaScript进行开发。

• 底部导航

  在app.json里面添加tabBar

  "tabBar": {
      "list": [
        {
          "text": "首页",
          "pagePath":  "pages/index/index"
        },
        {
          "text": "你好",
          "pagePath":  "pages/hello/hello"
        },
        {
          "text": "个人中心",
          "pagePath":  "pages/mine/mine"
        }
      ]
    },
  

6.编写逻辑

使用JavaScript编写小程序的业务逻辑，包括数据处理、事件处理和页面跳转等。

如果调用接口,需要配置域名白名单

登录授权

1. 在小程序中，调用`wx.login`方法获取临时登录凭证(code)，将该`code`发送给后端服务器。

2. 后端服务器接收到小程序发送的临时登录凭证(code)后，使用该`code`调用微信提供的接口进行登录凭证校验，获取用户唯一标识（openid）等信息。

3. 后端服务器根据获取到的用户信息，进行相应的处理和存储。可以将用户信息保存到数据库中，并生成后端自己的用户标识（例如用户ID），用于后续的用户管理。

4. 后端服务器将生成的用户标识返回给小程序，作为登录成功的标识。

5. 小程序前端接收到后端返回的用户标识后，可以在本地进行存储，用于后续的用户登录态管理。

7.调试测试

在微信开发者工具中进行调试和测试，确保小程序的功能和界面正常运行。

8.提交审核

在微信公众平台的开发设置页面，填写小程序的基本信息，包括小程序名称、介绍、图标等。

在开发者工具中，点击菜单栏的“上传”按钮，将小程序的代码上传到微信服务器。

在微信公众平台的开发设置页面，填写小程序的版本号和版本说明，然后点击提交审核。

9.发布上线

审核通过后，小程序可以发布上线，供用户在微信中使用。