注册微信小程序

注册

注册成功以后，邮箱验证，然后微信扫描提示的二维码成为管理员微信号。

完善小程序信息

下载开发工具

选择普通小程序开发工具

下载开发工具

添加开发者

• 如需添加开发者在下面添加开发者中添加，管理员默认拥有权限 无需添加。

开发

安装微信开发者工具Stable Build

新建项目

• AppID可在首页的开发设置中查看到

发布

上传代码

代码编辑完之后上传代码

填写版本信息

前往发布

• 建议先设为体验版本进行体验测试

添加体验成员

实战– 二维码生成器

项目结构

新建page

• 新建pageimagePage

app.json

• app.json 不能有注释； "enablePullDownRefresh": true启动下拉；

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/imagePage/imagePage"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "sitemapLocation": "sitemap.json"
  ,
  "tabBar":{
    "list":[{
      "pagePath":"pages/index/index",
      "text":"Main"
    },{
      "pagePath": "pages/imagePage/imagePage",
      "text": "Image"
    }]
  }
}

index.js

• 下载二维码生成类wxqrcode.js

//index.js
//导入wxqrcode模块
import QR from "../../utils/wxqrcode.js"
//获取应用实例
const app = getApp()

Page({
  data: {
    // 生成二维码的文本
    text: "",
    // 图片路径
    imagePath: "../../images/cat.gif"
  },
  // 下拉换gif图
  onPullDownRefresh: function() {
    let that = this;

    that.setData({
      imagePath: "../../images/cat2.gif"
    });
  },
  bindFromSubmit: function(e) {
    var that = this;
    console.log(e.detail.value.textarea);

    let qrcodeSize = that.getQRCodeSize()
    that.createQRCode(e.detail.value.textarea, qrcodeSize)
  },
  // 获取canvas大小，适配不同的屏幕
  getQRCodeSize: function() {
    var size = 0;
    try {

      var res = wx.getSystemInfoSync();
      var scale = 750 / 278;
      var width = res.windowWidth / scale;
      size = width;

    } catch (e) {
      console.log("获取屏幕尺寸失败" + e);
    }
    return size;
  },
  // 创建二维码图片
  createQRCode: function(text, size) {
    let that = this;
    let _img = QR.createQrCodeImg(text, {
      size: parseInt(size)
    });

    that.setData({
      imagePath: _img
    });

  },
})

index.wxml

<!--index.wxml-->
<view class="container">
  <form bindsubmit="bindFromSubmit">
    <textarea placeholder="请输入内容" name="textarea"></textarea>
    <button form-type="submit">提交</button>
  </form>
  <image src="{{imagePath}}" class="qrImagecodeClass"></image>
</view>

index.wxss

/**index.wxss**/
.qrImagecodeClass{
  width: 280rpx;
  height: 280rpx;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
}

imagePage.wxml

<!--pages/imagePage/imagePage.wxml-->
<view class="container">
  <image src="../../images/cat2.gif" class="qrImagecodeClass"></image>
</view>