【微信小程序 | 实战开发】配置微信小程序APPID并快速接入

简介: 【微信小程序 | 实战开发】配置微信小程序APPID并快速接入

写在前面:


manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称、图标、入口页面等信息。用户可通过HBuilder|HBuilderX的可视化界面视图进行配置,也可在源码视图中根据以下规范直接修改。

manifest.json文件根据w3c的webapp规范制定,plus节点下内容为HTML5 Plus扩展规范,其下包括iOS和Android子节点,内容来源分别为iOS和Android原生打包所要求的参数,用于对5+移动App打包为ipa或apk安装包进行配置。


一、小程序APPID是什么?怎么获取?


概述:


APPID全称为Application Identification,即应用程序标识,每个微信小程序都会有有一个原始的APPID,且是唯一的,它就相当于你的小程序在微信中的 ‘身份证’ ,有了它,微信客户端才能确定你的 ‘小程序’ 的身份,并使用微信提供的高级接口。


二、那么我们如何获取微信小程序APPID呢?


首先:我们先在浏览器搜索:微信公众平台


第一步:扫码登录到我们的小程序



第二步:【开发管理】-》【开发设置】-》【APPID】



三、那么我们得到appid有什么用?


概述:


appID就像门牌,AppSecret就像钥匙。AppID可以公开,但是AppSecret必须保密。而且微信官方文档反复强调,AppSecret的安全级别很高,也就是说如果泄露出去安全风险很大,要小心保管。你可以重新生成AppSecret,但是切记重新生成AppSecret前,跟你的程序员或技术外包服务商协调好,程序里如果有用到AppSecret的地方,要同步修改,否则程序会报错。


四、获取到appid,如何快如接入

4.1 在小程序项目 app.json 中配置 openai 插件


{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "chatbot": {
      "version": "插件最新版本号",
      "provider": "wx8c631f7e9f2465e1"
    },
    "WechatSI": {
      "version": "0.3.4",
      "provider": "wx069ba97219f66d99"
    }
  },
  "requiredBackgroundModes": [
    "audio"
  ],
  "sitemapLocation": "sitemap.json"
}


version:

应用版本信息,包括版本名称和版本号。


name: 版本名称,字符串类型,用于显示的版本字符串。可通过5+API plus.runtime.version获取版本名称。 本地离线打包配置:Android平台,iOS平台。

code 版本号,数字类型(正整数),操作系统使用,新版本的值要大于老版本,否则无法正常安装。可通过5+API plus.runtime.versionCode获取版本号。 本地离线打包配置:Android平台,iOS平台


4.2 在 app.js 中进行插件初始化


var plugin = requirePlugin("chatbot");
App({
    onLaunch: function () {
        plugin.init({
            appid: "P5Ot9PHJDechCYqDFAW1AiK6OtG3Ja", //小程序示例账户,仅供学习和参考
            openid: "", //用户的openid,必填项,可通过wx.login()获取code,然后通过后台接口获取openid
            userHeader: "", // 用户头像
            userName: "", // 用户昵称
            anonymous: false, // 是否允许匿名用户评价,默认为false,设为true时,未传递userName、userHeader两个字段时将弹出登录框
            success: () => {}, //非必填
            fail: (error) => {}, //非必填
        });
    },
});

4.3 获取用户 openid 的方法


第一步:调用 wx.login(),获取临时 code


相关文档: 点击查看


第二步:将获取到的 code 发送给后台换取 openid


相关文档: 点击查看


wx.login({
    success: (res) => {
        // 通过code换取openid
        if (res.code) {
            wx.request({
                url: "",
                method: "post",
                data: {
                    code: res.code,
                },
                success: (res) => {
                    if (res.data && res.data.openid) {
                        // 获取的openid存入storage,方便之后使用
                        wx.setStorageSync("openId", res.data.openid);
                    }
                },
            });
        }
    },
    fail: () => {},
    complete: () => {},
});


4.4 在相应的页面配置中引入插件


{
  "usingComponents": {
    "chat": "plugin://chatbot/chat"
  }
}


4.5 在相应页面的 wxml 中使用插件


chat 组件外部必须指定容器, 并设置容器高度, 如果全屏展示, 设置高度为 100vh, 如果是自定义导航栏, 设置高度为(100vh - 导航栏的高度)即可.


<view style="height: 100vh">
    <chat
        bind:queryCallback="getQueryCallback"
        bind:openWebview="openWebview"
        bind:openMiniProgram="openMiniProgram"
    />
</view>


4.6 在相应页面的 js 中配置返回首页回调方法


getQueryCallback 回调, 返回数据
getQueryCallback: function(e) {
}


五、如何配置动态appid


如果你的项目有遇到同一套代码,上架多个小程序的需求,这时候就要切换appid。


在uniapp的项目代码中,是通过修改manifest.json文件里面的appid属性达到切换的效果,其中有两处需要修改:


新增vue.config.js文件

在根目录下新增vue.config.js文件


// 读取 manifest.json ,修改后重新写入
const fs = require('fs')
const manifestPath = './src/manifest.json'
let Manifest = fs.readFileSync(manifestPath, { encoding: 'utf-8' })
function replaceManifest(path, value) {
  const arr = path.split('.')
  const len = arr.length
  const lastItem = arr[len - 1]
  let i = 0
  let ManifestArr = Manifest.split(/\n/)
  for (let index = 0; index < ManifestArr.length; index++) {
    const item = ManifestArr[index]
    if (new RegExp(`"${arr[i]}"`).test(item)) ++i;
    if (i === len) {
      const hasComma = /,/.test(item)
      ManifestArr[index] = item.replace(new RegExp(`"${lastItem}"[\\s\\S]*:[\\s\\S]*`), `"${lastItem}": ${value}${hasComma ? ',' : ''}`)
      break;
    }
  }
  Manifest = ManifestArr.join('\n')
}
// 使用
replaceManifest('app-plus.usingComponents', false)
replaceManifest('app-plus.splashscreen.alwaysShowBeforeRender', false)
replaceManifest('mp-baidu.usingComponents', false)
fs.writeFileSync(manifestPath, Manifest, {
  "flag": "w"
})
module.exports = {
  // ...
}


修改package.json文件命令


"dev:[小程序a]": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode test",
    "dev:[小程序b]": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --mode prod",
    "build:[小程序a]": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --mode test",
    "build:[小程序b]": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --mode prod"


以上四条命令分别代表


小程序a开发模式下的测试环境

小程序b开发下的正式环境

小程序a打包模式下的测试环境

小程序b打包模式下的正式环境

目录
相关文章
ly~
|
9天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
43 6
|
9天前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
29天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
61 3
|
9天前
|
小程序 前端开发 API
微信小程序 - 调用微信 API 回调函数内拿不到 this 问题(解决方案)
本文讨论了在微信小程序中调用API回调函数时无法获取到`this`上下文的问题,并提供了解决方案。在回调函数中,使用一个变量(如`that`)来保存当前的`this`引用,然后在回调内部使用这个变量来访问当前页面的数据和方法。
|
2月前
|
移动开发 小程序 前端开发
|
2月前
|
JSON 小程序 JavaScript
超详细微信小程序开发学习笔记,看完你也可以动手做微信小程序项目
这篇文章是一份全面的微信小程序开发学习笔记,涵盖了从小程序介绍、环境搭建、项目创建、开发者工具使用、文件结构、配置文件、模板语法、事件绑定、样式规范、组件使用、自定义组件开发到小程序生命周期管理等多个方面的详细教程和指南。
|
2月前
|
小程序 前端开发
微信小程序商城,微信小程序微店 【毕业设计参考项目】
文章推荐了一个微信小程序商城项目作为毕业设计参考,该项目在Github上获得18.2k星,提供了详细的使用教程和前端页面实现,适合学习微信小程序开发和作为毕业设计项目。
微信小程序商城,微信小程序微店 【毕业设计参考项目】
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
323 65
|
9天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `&lt;swiper&gt;` 实现,二是利用 Nut UI 的 `&lt;nut-swiper&gt;` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图

热门文章

最新文章

下一篇
无影云桌面