小程序、H5登录授权、分享、支付流程

分类：微信小程序作者：编程之家用户

前言

对于前端来说，微信的 支付 、 分享 、 登录 是一定要掌握的，今天这篇文章，主要对这三方面的流程进行详细的介绍。主要内容如下：

域名相关知识介绍

该网站不安全，请不要输入密码

微信小程序授权登录流程

op=>operation: openid判断是否登录授权
op2=>operation: 根据wx.login获取code
op3=>operation: 调用服务端根据code换取openid
op4=>operation: 通过用户授权，获取信息，存到数据库
op->op2->op3->op4
复制代码

如果你从来没有阅读过小程序登录授权的文档，建议你看一下下面的地址：

服务端官方文档 客户端文档

nodejs + 小程序实现授权登录

前端部分

  1. 根据本地是否有userId判断是否登录，如果没有登录，则获取用户的openid
onLoad() {
   if(!this.data.userId) {
       this.getSession()
   }
},getSession() {
   wx.login({
     success: (res) => {
       if (res.code) {
         app.get(Api.getSession,{
           code: res.code
         }).then(res => {
           store.setItem('openid',res.openid)
         })
       }
     }
   })
 }复制代码
  1. 点击授权按钮，发起登录请求。
getUserInfo(e) {
    let userInfo = e.detail.userInfo;
    userInfo.openid = store.getItem('openid')
    app.get(Api.login,{
        userInfo
    }).then(res => {
        store.setItem('userId',res.data.userId)
        this.setData({
            userId: res.userId
        })
    })
}复制代码

服务端部分

在 config 里面，定义公用的 appid 和 appsecret

module.exports = {
    wx: {
        appId: 'wx0ef10432747d8f57',appsecret: 'cc47a6127687e999a1dffa756ff83c0e'
    },mp: {
        appId: 'wx0691f1dcf6e5e231',appSecret: 'c7ed875e338120f15f49476a6596eb4f'
    }
}复制代码

然后通过调用小程序 官方文档 的接口，获取到 appid 传给客户端

let express = require('express');
let router = express.Router();
let request = 'request');
let config = './config');
let uril = './../../util/index')
config = Object.assign({},config.mp);

router.get('/getSession',(req,res) => {
    let code = req.query.code
    if (!code) {
        res.json(uril.handleFail('code不能为空',10001))
    }
    let sessionUrl = `https://api.weixin.qq.com/sns/jscode2session?appid=${config.appId}&secret=${config.appSecret}&js_code=${code}&grant_type=authorization_code`;
    request(sessionUrl,(err,response,body) => {
        let result = util.handleResponse(err,body)
        res.json(result)
    })
})复制代码

登录接口 的编写

// 小程序授权登录
router.get('/login',51); font-weight: 700;">async function(req,res){
  let userInfo = JSON.parse(req.query.userInfo);
  if (!userInfo){
    // 如果接口没有信息，则返回错误信息
    res.json(util.handleFail('用户信息不能为空',0);">10002))
  }else{
    // 查询当前用户是否已经注册
    let userRes = await dao.query({ openid: userInfo.openid},'users_mp');
    if (userRes.code == 0){
      // 如果已经注册，直接把查出来的信息返回给客户端
      if (userRes.data.length >0){
        res.json(util.handleSuc({
          userId: userRes.data[0]._id
        }))
      }else{
        // 如果这个用户之前没有注册，则在数据库插入用户信息
        let insertData = await dao.insert(userInfo,0);">'users_mp');
        if (insertData.code == 0){
          let result = await dao.query({ openid: userInfo.openid },0);">'users_mp');
          res.json(util.handleSuc({
            userId: result.data[0]._id
          }))
        }else{
          res.json(insertData);
        }
      }
    }else{
      res.json(userRes);
    }
  }
})复制代码

上述代码的 handleFail 和 handleResponse 是封装的对数据的统一处理，如果有兴趣，参见 github 地址。这里不展示代码。

需要注意的是，这种实现方式，获取 openid 的行为放在后端实现了。如果放在前端实现也可以，但是会相对比较麻烦一点。此时，suerId就已经在数据库存储，并且在本地保存了，下次登录的时候，如果有userId存在就不需要再次登录了。

H5的登录授权和分享流程

H5的登录授权略有不同。如果用户登录授权页面，发现该用户没有登录授权，则需要跳转到授权页面。 官方文档 给出的流程如下：

1 第一步：用户同意授权，获取code2 第二步：通过code换取网页授权access_token3 第三步：刷新access_token（如果需要）4 第四步：拉取用户信息(需scope为 snsapi_userinfo)5 附：检验授权凭证（access_token）是否有效

在项目中代码如下：(这里代码没有实现刷新access_token和拉取用户信息)

页面加载的时候，判断是否已经授权。

mounted(){
   this.checkUserAuth();
 },methods:{
// 检查用户是否授权过
checkUserAuth(){
  let openId = this.$cookie.get('openId');
  if(!openId){
    // 如果没有登录授权，则跳转到微信提供的跳转页面。
    window.location.href = API.wechatRedirect;
  }else{
  // 如果用户已经授权，则调用获取微信配置信息接口
    this.getWechatConfig();
  }
},复制代码

API.wechatRedirect:

wechatRedirect:'/api/wechat/redirect?url=http%3A%2F%2Fm.51purse.com%23%2Findex&scope=snsapi_userinfo',复制代码

「注意」

  • url地址需要 encodeURIComponent 编码才可以。
  • m.51purse.com 需要与你在微信公众号后台配置的 授权域名 一致！

nodejs 对登录授权回调接口的实现主要是拿到客户端的请求参数，请求微信提供的 接口

,function (req,res) {
  let redirectUrl = req.query.url,scope = req.query.scope,callback = 'http://m.51purse.com/api/wechat/getOpenId';
  cache.put('redirectUrl',redirectUrl);
  // 获取到客户端带过来的数据，请求微信接口
  let authorizeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.appId}&redirect_uri=${callback}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
  res.redirect(authorizeUrl);
})
复制代码

当用户点击 确认授权 之后，会执行跳转 callbacl：http://m.51purse.com/api/wechat/getOpenId 。而这个接口也是node端实现的，具体内容如下：

,51); font-weight: 700;">let code = req.query.code;
  console.log("code:"+code);
  if(!code){
    res.json(util.handleFail('当前未获取到授权code码'));
  }// 用code换取access_token
    await common.getAccessToken(code);
    if(result.code == // 换取access_token成功
      let data = result.data;
      let expire_time = 1000 * 60 * 2;
      // 往客户端写入cookie：openId
      res.cookie('openId',data.openid,{ maxAge: expire_time });
      let openId = data.openid;
      await dao.query({ 'openid': openId },0);">'users');
      0){
        if (userRes.data.length>0){
          // 从数据库查找到用户信息后，回调到客户端的页面
          let redirectUrl = cache.get('redirectUrl');
          res.redirect(redirectUrl);
        }else{
          let userData = await common.getUserInfo(data.access_token,openId);
          await dao.insert(userData.data,0);">'users');
          0){
            // 从数据库查找到用户信息后，回调到客户端的页面
            'redirectUrl');
            res.redirect(redirectUrl);
          }else{
            // 返回错误信息
            res.json(insertData);
          }
        }
      }// 返回错误信息
        res.json(userRes);
      }
    }else{
      // 返回错误信息
      res.json(result);
    }
  }
})
复制代码

「注意」：上面的代码为了简单，删除了一些不必要的代码，如有兴趣，访问gitHub。

H5分享流程

同样，如果你没有阅读过微信H5开发的 官方文档 ,建议你先阅读。关于分享，你应该阅读以下内容：

当再次回调到页面的时候，从cookie已经拿到openId了。客户端会继续执行下面的代码。获取到服务端返回的配置信息，从而初始化分享的功能。

在这之前，你需要 npm install wx-jssdk

)[0]).then(function(response){
    let res = response.data;
    if(res.code == 0){
      let data = res.data;
      wx.config({
        debug: true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId,136);">// 必填，公众号的唯一标识
        timestamp: data.timestamp,136);">// 必填，生成签名的时间戳
        nonceStr: data.nonceStr,136);">// 必填，生成签名的随机串
        signature: data.signature,136);">// 必填，签名
        jsApiList: data.jsApiList // 必填，需要使用的JS接口列表
      })
      wx.ready(()=>{
        util.initShareInfo(wx);
      })
    }
  })
}复制代码

util/index.js 里面对分享的功能进行了封装。

+name+'=([^&]*)');
    let r = window.location.search.substr(1).match(reg);
    if(r!=null)return decodeURIComponent(r[2]);
  },initShareInfo(wx){
    let shareInfo = {
      title: 'xxxx',136);">// 分享标题
      desc: // 分享描述
      link: 'http://m.51purse.com/#/index',136);">// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: '',136);">// 分享图标
    }
    wx.onMenuShareAppMessage(shareInfo);
    wx.onMenuShareTimeline(shareInfo);
    wx.onMenuShareQQ(shareInfo);
    wx.onMenuShareQZone(shareInfo);
    // 下面两种方法为新的方法,上面的方法将会被淘汰。
    wx.updateAppMessageShareData(shareInfo);
    wx.updateTimelineShareData(shareInfo);
  }
}
复制代码

nodejs端对 /wechat/jssdk 接口的实现如下：

,51); font-weight: 700;">let url = req.query.url;
  await common.getToken();
  if (result.code == 0){
    let token = result.data.access_token;
    let params = {
      // 生成随机字符串
      noncestr:util.createNonceStr(),136);">// 生成时间戳
      timestamp:util.createTimeStamp(),url
    }
      let str = util.raw(params);
      'str:::' + JSON.stringify(params))
      let sign = createHash('sha1').update(str).digest('hex');
      res.json(util.handleSuc({
        appId: config.appId,136);">// 必填，公众号的唯一标识
        timestamp: params.timestamp,136);">// 必填，生成签名的时间戳
        nonceStr: params.noncestr,136);">// 必填，生成签名的随机串
        signature: sign,136);">// 必填，签名
        jsApiList: [
          'updateAppMessageShareData',0);">'updateTimelineShareData',0);">'onMenuShareTimeline',0);">'onMenuShareAppMessage',0);">'onMenuShareQQ',0);">'onMenuShareQZone',0);">'chooseWXPay'
        ] // 必填，需要使用的JS接口列表
      }))
    }
  }else{
    res.json(result);
  }
})复制代码

以上代码主要获得基础的 token ,然后用基础 token 结合签名、时间戳、随机数等相关的参数，返回给客户端相应的参数。

需要注意的是， 基础token 和 accessToken 的区别。建议 参考文章 。

到此，微信H5接入jssdk实现分享就已经完成了。

小程序支付

小程序支付前端流程

  • 获取openId
  • 调起数字签名

后端支付流程

  • 拼接常规参数
  • 生成签名
  • 拼接xml数据
  • 调用下单接口
  • 获取预支付Id：prepay_id
  • 生成支付sdk
  • 定义回调接口，接受微信支付消息

支付的主要逻辑在服务端

下面把服务端的流程通过代码的方式表述出来。首先在util中封装了一些支付需要的公共方法

);
module.exports = {
  // 生成随机数
  createNonceStr(){
    Math.random().toString(36).substr(2,0);">15);
  },136);">// 生成时间戳
  createTimeStamp(){
    parseInt(Date().getTime() / 1000) + ''
  },136);">// 生成签名
  getSign(params,key){
    let string = this.raw(params) + '&key=' + key;
    'md5').update(string).digest('hex');
    return sign.toUpperCase();
  },136);">// 生成系统的交易订单号
  getTradeId(type='wx'){
    let date = Date().getTime().toString();
    let text = '';
    let possible = '0123456789';
    for(let i=0;i<5;i++){
      text += possible.charAt(Math.floor(Math.random() * possible.length))
    }
    return (type == 'wx'?'ImoocWxJuZi':'ImoocMpJuZi') + date + text;
  },136);">// Object 转换成json并排序
  raw(args){
    let keys = Object.keys(args).sort();
    let obj = {};
    keys.forEach((key)=>{
      obj[key] = args[key];
    })
    // {a:1,b:2} =>  &a=1&b=2
    // 将对象转换为&分割的参数
    let val = let k in obj){
      val += '&' + k + '=' +obj[k];
    }
    return val.substr(1);
  }
}复制代码

下面是对支付的方法的封装，其中调用了util中的函数。客户端调用的就是下面的 order 方法。

/**
 * 微信小程序、H5通用支付封装
 */
let config = require('./../pay/config')
let request = require('request')
let util = require('../../util/util')
let createHash = require('create-hash')
let xml = require('xml2js')
config = config.mch;
module.exports = {  
  order: function (appid,attach,body,openid,total_fee,notify_url,ip){
    return new Promise((resolve,reject)=>{
      let nonce_str = util.createNonceStr();
      let out_trade_no = util.getTradeId('mp');
      // 支付前需要先获取支付签名
      let sign = this.getPrePaySign(appid,ip,nonce_str,out_trade_no);
      // 通过参数和签名组装xml数据，用以调用统一下单接口
      let sendData = this.wxSendData(appid,out_trade_no,sign);
      let self = this;
      let url = 'https://api.mch.weixin.qq.com/pay/unifiedorder';
      request({
        url,method: 'POST',body: sendData
      },function (err,body) {
        if (!err && response.statusCode == 200) {
          xml.parseString(body.toString('utf-8'),(error,res)=>{
            if(!error){
              let data = res.xml;
              console.log('data:' + JSON.stringify(data));
              if (data.return_code[0] == 'SUCCESS' && data.result_code[0] == 'SUCCESS'){
                // 获取预支付的ID
                let prepay_id = data.prepay_id || [];
                let payResult = self.getPayParams(appid,prepay_id[0]);
                resolve(payResult);
              }
            }
          })
        } else {
          resolve(util.handleFail(err));
        }
      })
    })
  },// 生成预支付的签名
  getPrePaySign: function (appid,out_trade_no) {
    let params = {
      appid,mch_id: config.mch_id,spbill_create_ip: ip,trade_type: 'JSAPI'
    }
    let string = util.raw(params) + '&key=' + config.key;
    let sign = createHash('md5').update(string).digest('hex');
    return sign.toUpperCase();
  },// 签名成功后 ，根据参数拼接组装XML格式的数据，调用下单接口
  wxSendData: function (appid,sign) {
    let data = '<xml>' + 
      '<appid><![CDATA[' + appid + ']]></appid>' + 
      '<attach><![CDATA[' + attach + ']]></attach>' + 
      '<body><![CDATA[' + body + ']]></body>' + 
      '<mch_id><![CDATA[' + config.mch_id + ']]></mch_id>' + 
      '<nonce_str><![CDATA[' + nonce_str + ']]></nonce_str>' + 
      '<notify_url><![CDATA[' + notify_url + ']]></notify_url>' + 
      '<openid><![CDATA[' + openid + ']]></openid>' + 
      '<out_trade_no><![CDATA[' + out_trade_no + ']]></out_trade_no>' + 
      '<spbill_create_ip><![CDATA[' + ip + ']]></spbill_create_ip>' + 
      '<total_fee><![CDATA[' + total_fee + ']]></total_fee>' + 
      '<trade_type><![CDATA[JSAPI]]></trade_type>' + 
      '<sign><![CDATA['+sign+']]></sign>' + 
    '</xml>'
    return data;
  },getPayParams:function(appId,prepay_id){
    let params = {
      appId,timeStamp:util.createTimeStamp(),nonceStr:util.createNonceStr(),package: 'prepay_id=' + prepay_id,signType:'MD5'
    }
    let paySign = util.getSign(params,config.key);
    params.paySign = paySign;
    return params;
  }
}复制代码

最后定义 /pay/payWallet 的支付接口，里面调用公用的order方法。

,51); font-weight: 700;">let openId = req.query.openId;//用户的openid
  let appId = config.appId;//应用的ID
  let attach = "小程序支付课程体验";//附加数据
  let body = "欢迎学习首门支付专项课程";//支付主体内容
  let total_fee = req.query.money;//支付总金额
  let notify_url = "http://localhost:3000/api/mp/pay/callback"
  let ip = "123.57.2.144";
  wxpay.order(appId,openId,ip).then((result)=>{
    res.json(util.handleSuc(result));
  }).catch((result)=>{
    res.json(util.handleFail(result.toString()))
  });
})复制代码

这里的流程请参见 官方描述 。官方描述的非常清楚，这儿就不描述更多了，其实主要就是拼接一些参数，获取 签名 。然后根据签名加上其他需要的 参数 (参见上述代码)再凭借xml的数据。然后再调用统一下单接口 https://api.mch.weixin.qq.com/pay/unifiedorder 。生成 prepay_id之后，生成小程序端需要的一些参数，然后把这些参数返回个小程序客户端，供小程序的客户端调用微信小程序的支付功能。

小程序前端支付非常简单，只是简单的调用服务端提供的 payWallet 接口，传入 openId 和 money 即可。然后获取到相应的参数，调用微信提供的 requestPayment 拉起支付即可。

主要代码逻辑如下：

pay() {
    app.get(Api.payWallet,{
      openId: Store.getItem('openId'),money: this.data.index
    }).then((res) => {
      // 支付
      wx.requestPayment({
        timeStamp: res.timeStamp,51); font-weight: 700;">nonceStr: res.nonceStr,51); font-weight: 700;">package: res.package,51); font-weight: 700;">signType: res.signType,51); font-weight: 700;">paySign: res.paySign,51); font-weight: 700;">success: function (errmsg) {
          if (errmsg == 'requestPayment:ok') {
            wx.showToast({
              title: '支付成功',51); font-weight: 700;">icon: 'success'
            });
          }
        },51); font-weight: 700;">fail: function (res) {
          if (res.errMsg == 'requestPayment:fail cancel') {
            .showToast({
              '支付取消',0);">'none'
            });
          } else {
            title: res.errmsg,0);">'none'
            });
          }
        }
      })
    });
  }
复制代码

到这里，小程序端的支付功能就已经实现了。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

微信小程序订阅消息
概述 消息能力是小程序能力中的重要组成，我们为开发者提供了订阅消息能力，以便实现服务的闭环和更优的体验。 订阅消息推送位置：服务通知 订阅消息下发条件：用户自主订阅 订阅消息卡片跳转能力：点击查看详情可提爱转至该小程序的页面 消息类型 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后，后续服务
判断H5页面环境在微信中还是小程序中
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 &lt;script type=&quot;text/javascript&quot; src=&quot;https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别
wx.reLaunch和wx.navigateTo，wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种，一个完整的项目写下来，用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是：data-index=&quot;{{index}}&quot
H5页面判断是否是微信小程序打开
H5项目接入微信授权登录，通过 UA 区分微信还是普通浏览器： let&#160;ua&#160;=&#160;navigator.userAgent.toLowerCase(); let&#160;isWeixin&#160;=&#160;ua.indexOf(&#39;micromessenge
微信小程序获取data-xx=""属性的值，自定义属性设置和获取（data-）
微信小程序获取data-xx=&quot;&quot;属性的值，自定义属性设置和获取（data-） 微信小程序&lt;view class=&quot;details-btn&quot; data-taskId=&quot;111&quot; bindtap=&#39;taskdetails&#39
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined
小程序报错：TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0（或者当前的） -&gt; 2.14.1 解决问题
H5跳转微信小程序-成功案例（VUE）（踩坑无数）
H5跳转微信小程序-成功案例（VUE）（踩坑无数） TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点： 1、已认证的服务号 2、绑定JS接口安全域名 （在微信公众平台设置） 3、IP白名单 （在微信公众平台设置） 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解，需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中，我们Activity和Fragment都有栈的概念在里面，微信小程序页面也
小程序运行程序
情景1.拉取公司代码演示： 因为github有墙，这里我们以gitee(码云)为例作为演示 (其实就是国产github，也非常好用~) 步骤一：打开Git界面 先在一个空文件夹右击Git Bash Here，打开git界面 步骤二：输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序？
如何开发微信小程序？ 作为一名10多年一直从事互联网平台开发的从业者，我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤， 老张带您捋一捋整个环节，小白用户可以收藏了。 好了废话不多说，开始！ 一、开发前小程序需要准备的资料 我们在开发微信小程序前，需要准备下相关资料。这个资料主要是后
微信小程序getApp()和App()方法讲解
 
原生小程序开发优化方案
原生小程序开发优化方案 为了更好的制定优化方案，我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同，依然是浏览器内核，而不是原生客户端。 而对于传统的网页来说，UI 渲染和 JS 脚本是在同一个线程中
优化小程序大小
1，不要下两倍尺寸的图片， 小程序本身自己就会对元素缩小两倍，设计图片的一杯就已经很清晰了。 2，图片压缩，（主要是压缩静态资源，ps 可以压缩，然后有一些在线压缩工具，保持600-800kb 的静态） 3，通用的代码组件化 4，是在工程量太大可以分包，分包现在最大支持20m（一般都不会去分包的）
能取代90%的人的工作的ChatGpt到底牛在哪？
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT，上线两个月就已经超过一亿用户，成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈，引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛，虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现？它到底会不会取代搜索引擎？90%的人真的会因为ChatG
微信小程序开发知识点
文章浏览阅读193次。8. 导航和路由管理：掌握小程序的导航方式，如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等，学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构：了解小程序的定义、特点以及与传统APP的区别，掌握小程序的运行环境、组件和API等基本概念。10. 支付功能：学习小程序的支付方式，如微信支付、支付宝支付等，了解支付流程和注意事项，学会实现小程序的支付功能。9. 用户授权和登录：了解小程序的用户授权机制，如获取用户信息、调用微信API等，学会实现用户的登录和注册功能。_微信小程序开发知识点总结
微信小程序斗地主完整代码及步骤
文章浏览阅读4.8k次，点赞7次，收藏18次。一、准备工作1. 安装微信开发者工具，并登录微信小程序账号；2. 准备斗地主游戏的图片资源；3. 准备斗地主游戏的音效资源；二、创建小程序1. 打开微信开发者工具，点击“新建小程序”，输入小程序名称，选择小程序的项目目录，点击“创建”；2. 在小程序的项目目录中，新建文件夹“images”，将准备好的斗地主游戏的图片资源放入“images”文件夹中；3. 在小程序的项目目录中，新建文件夹“sounds”，将准备好的斗地主游戏的音效资源放入“sounds”文件夹中；三、编写代码1. 在小程_扑克牌微信小程序代码
微信小程序狼人杀游戏代码及步骤
文章浏览阅读3.9k次，点赞3次，收藏7次。一、准备工作：1. 安装微信开发者工具，创建小程序项目；2. 准备游戏角色图片；3. 准备游戏背景音乐；二、实现步骤：1. 创建游戏页面，添加游戏角色图片，添加游戏背景音乐；2. 创建游戏角色类，定义游戏角色属性，如角色名称、角色图片、角色能力等；3. 创建游戏类，定义游戏属性，如游戏人数、游戏角色、游戏规则等；4. 创建游戏控制类，定义游戏流程，如游戏开始、游戏结束、游戏角色分配等；5. 创建游戏界面，实现游戏流程，如游戏开始、游戏结束、游戏角色分配等；6. 创建游戏结果页面，显示游戏_微信小程序游戏代码
开发微信小程序模拟聊天步骤及代码
文章浏览阅读1.7k次。1. 创建小程序项目：使用微信开发者工具创建一个小程序项目，并在项目中添加一个页面，用于模拟聊天。 2. 定义数据结构：定义一个数据结构，用于存储聊天记录，包括发送者、接收者、消息内容等信息。 3. 实现聊天功能：实现聊天功能，包括发送消息、接收消息、显示消息等功能。 4. 实现界面：使用微信小程序的界面框架，实现聊天界面，包括聊天记录列表、输入框等。代码示例：// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
微信小程序开发商城详细步骤
文章浏览阅读2.1k次。1、创建小程序项目：使用微信开发者工具，新建一个小程序项目，输入项目名称，选择项目目录，点击“创建”按钮，即可创建小程序项目。2、添加页面：在小程序项目中，可以添加多个页面，每个页面都有自己的页面文件，比如首页、分类页、购物车页、我的页面等。3、添加组件：在小程序项目中，可以添加多个组件，比如商品列表组件、购物车组件、订单组件等，用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口：在小程序项目中，可以添加多个接口，用于获取商品信息、购物车信息、订单信息等，以便在页面中显示。5、_微信开发者工具做一个我的商城
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot