编程导航会员会员
登录/注册
编程导航Uniapp话题讨论

Uniapp

2 参与
分享

快来分享你的内容吧～

写文章
写面经
向专家提问，帮你解惑
点击登录，快来和大家讨论吧～
表情
图片
话题
打卡
综合
交流
文章
问答
热门话题
更多>
1
训练营打卡
13920
2
学习打卡
6690
3
求职
2610
4
AI
2200
5
交流
1170
6
AI编程
600
7
Java
590
8
简历
520
9
编程
460
10
程序员
430

开箱即用！unaipp微信开发合集，登录/支付/订阅消息，一键获取手机号/头像/昵称

## 前言 大家好，我是王天，做uniapp三年了，这一路踩坑无数，但也收获满满。尤其是微信小程序，花了我不少心思。 今天分享的是，在使用uniapp开发中，积累的一些微信业务组件，希望能帮助到大家。 ## 背景 uniapp很多小程序组件库、功能丰富，可以帮我们快速做开发。但是呢，这些组件库，缺了点儿跟微信业务直接相关的、比如怎么在微信里收钱、怎么让用户登录，还有怎么发订阅消息给他们。这些业务功能，组件库里都没有现成的。 所以啊，我自己动手，开发了一套微信业务组件合集，起了名字叫【uboxui】，专门解决这些问题。这样大家在做微信小程序的时候，就能更方便、更快捷地搞定这些业务上的事儿了。 ## 功能合集 本文重点是介绍微信小程序相关的业务组件，已发布线上，扫码可查看，完整项目代码在文末 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/6615HNU2QxQ3PLRK.webp" alt="画板" width="100%" /> ## 微信小程序登录 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/2kF0zlORj8vEvIcJ.webp" alt="" width="100%" /> ### 运行效果 项目行效果如下，完整代码在文末 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/X1enRkXj20Q7ac8K.webp" alt="" width="100%" /> 小程序登录本质是获取用户openid，流程可大致分为4部分，其中前端需要做如下： ### 前端负责部分 + 调用 wx.login API 获取 code 。 + 将 code 发送给后端。 + 接收后端返回的登录态标识（如 token）。 + 将登录态标识存储在本地。 + 在后续请求中携带登录态标识进行身份验证。 + 维护登录态，如检查登录态是否过期并重新发起登录请求。 ### 小程序完整登录流程 #### 1、前端发起登录请求 + 用户点击登录按钮。 + 前端调用微信小程序的 wx.login API 获取临时的登录凭证 code 。 + 前端将 code 发送给后端。 #### 2、后端处理登录凭证 + 后端接收到前端发送的 code 。 + 后端使用 code 向微信服务器请求 session_key 和 openid 。 + 微信服务器返回 session_key 和 openid 给后端。 + 后端将 openid 作为用户的唯一标识，与自身的用户系统关联或创建新用户。 + （可选）后端生成自定义的登录态标识（如 token），并返回给前端。 #### 3、前端存储登录态标识 + 前端接收到后端返回的登录态标识（如 token）。 + 前端将登录态标识存储在本地（如使用 wx.setStorageSync ）。 + 在后续的请求中，前端携带登录态标识（如放在请求头中）进行身份验证。 #### 4、前端维护登录态 + 在用户每次使用小程序时，前端检查本地是否存储了有效的登录态标识。 + 如果登录态标识过期或不存在，前端重复步骤 1 重新发起登录请求。 ## 获取微信昵称、头像 ### 运行效果 项目行效果如下，完整代码在文末 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/pFw55b2FDxoyKO1d.webp" alt="" width="100%" /> 获取微信用户头像昵称，需要用到微信开放能力 ### 头像选择 头像获取需要配置 button组件的 open-type设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径 ### 昵称获取 获取用户昵称，需要将 input组件type类型设置nickname，用户输入内容时，会在键盘上方展示昵称 ## 一键获取手机号 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/HY6btVVpN1sMLqDv.webp" alt="" width="100%" /> ### 运行效果 项目行效果如下，完整代码在文末 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/fc3vXJSNEV5ivVMq.webp" alt="" width="100%" /> ### 开发步骤： <font style="color:#000000;background-color:#FBDE28;">前置条件！认证小程序账号才有获取手机号能力</font> 1. 设置项目 appid 2. Button 配置开放能力 为getnumbetphone 3. 点击button，获取code口令 4. 调用微信开放api解码手机号 注意！微信开放api为服务端接口，需要后端服务调用，熟悉node的前端小伙伴也可以搭建一个本地node做测试，我这里用的uniapp的云开发免环境配置比较方便。 ## 微信支付基本流程 ### 运行效果 项目行效果如下，完整代码在文末 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/ksgUkTMnqq6EXU3M.webp" alt="" width="100%" /> ### 环境配置 + 1、微信公众平台（小程序、公众号主体必须是企业认证） + 2、开通微信商户平台 （收款平台），关联小程序appid ### 支付步骤 + ⚠[前置条件]——必须先微信登录，获取用户openid + ① 生成支付参数；以服务端方式调用微信api生成支付参数 + ② 拉起微信支付弹框；前端接收到支付参数，调用微信支付 + ③ 监听支付状态、success / error ## 微信订阅消息推送 本项目微信订阅后端是通过云函数，建议根据自身项目切换后端服务。 ### 运行效果 项目行效果如下，完整代码在文末 <img src="https://pic.code-nav.cn/post_picture/1842538896137445377/PfjUqCoPyfPEbtPU.webp" alt="" width="100%" /> ### 步骤 1. 开通订阅消息、选择模板 2. 使用uniclound 订阅消息插件，推送消息 3. 前端先订阅 4. 后端云函数安装 订阅消息插件+token统一管理模块 ** 注意！测试阶段将 微信ip白名单关闭，否则无法推送** ## 项目源码 小程序插件已经发布到uniapp插件市场，有兴趣的朋友可以下载了解下哈 👉[uboxui 一个功能丰富的小程序业务插件库 - DCloud 插件市场](https://ext.dcloud.net.cn/plugin?id=17178) <font style="color:#000000;">代码如有问题，联系王天哈</font><font style="color:#FAFAFA;background-color:#8A8F8D;"> wangtian3111</font>

老师好，最近在用uniapp开

老师好，最近在用uniapp开发安卓和iOS APP，现在想做一个根据文件类型获取手机已安装且可以打开的APP列表，由于在安卓和iOS方面接触较少，所以在使用uniapp写原生插件的遇到很多问题，不知老师是否分享一些demo吗？🌝

老师好，最近在用uniapp开

老师好，最近在用uniapp开发安卓和iOS APP，现在想做一个根据文件类型获取手机已安装且可以打开的APP列表，由于在安卓和iOS方面接触较少，所以在使用uniapp写原生插件的遇到很多问题，不知老师是否分享一些demo吗？🌝

将uniAPP项目导入到微信开发者工具中保姆级教程

<html> <head></head> <body> <div class="content ql-editor"> <p><br></p> <p><br></p> <p><br></p> <h2>什么是uniAPP？</h2> <p><br></p> <p><span style="color: rgb(233, 105, 0);">uni-app</span><span style="color: rgb(44, 62, 80);"> 是一个使用 </span><a href="https://vuejs.org/" target="_blank">Vue.js</a><span style="color: rgb(44, 62, 80);"> 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。</span></p> <p><a href="https://uniapp.dcloud.net.cn/" target="_blank">https://uniapp.dcloud.net.cn/</a></p> <p><span style="color: rgb(233, 105, 0);">uni-app</span><span style="color: rgb(44, 62, 80);">在手，做啥都不愁。即使不跨端，</span><span style="color: rgb(233, 105, 0);">uni-app</span><span style="color: rgb(44, 62, 80);">也是更好的小程序开发框架（</span><a href="https://ask.dcloud.net.cn/article/35947" target="_blank">详见</a><span style="color: rgb(44, 62, 80);">）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。</span></p> <p><br></p> <p><span style="color: rgb(233, 105, 0);">uni-app</span><span style="color: rgb(153, 153, 153);">支持通过 可视化界面、</span><a href="https://uniapp.dcloud.io/quickstart-cli" target="_blank">vue-cli命令行</a><span style="color: rgb(153, 153, 153);"> 两种方式快速创建项目。</span></p> <p><br></p> <p><span style="color: rgb(44, 62, 80);">可视化的方式比较简单，HBuilderX内置相关环境，开箱即用。</span></p> <p><br></p> <p><br></p> <p><br></p> <h2><span style="color: rgb(44, 62, 80);">开始之前，开发者需先下载安装如下工具：</span></h2> <p><br></p> <ol> <li data-list="bullet"><span class="ql-ui"></span><strong style="color: rgb(44, 62, 80);">HBuilderX</strong><span style="color: rgb(44, 62, 80);">：</span><a href="https://www.dcloud.io/hbuilderx.html" target="_blank">官方IDE下载地址</a></li> </ol> <p><span style="color: rgb(44, 62, 80);">HBuilderX是通用的前端开发工具，但为</span><span style="color: rgb(233, 105, 0);">uni-app</span><span style="color: rgb(44, 62, 80);">做了特别强化。</span></p> <p>我们先将下载好的uniAPP源码导入进去，如下图，点击左上角的文件-&gt;导入-&gt;从本地目录中导入</p> <p><br></p> <p></p> <p><br></p> <p><br></p> <ol> <li data-list="bullet"><span class="ql-ui"></span><strong>微信开发者工具</strong></li> </ol> <p>如果你是第一次使用，还需要下载微信开发者工具 链接如下</p> <p><a href="https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html" target="_blank">https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html</a></p> <p></p> <p><br></p> <p><br></p> <p><br></p> <p>根据自己的电脑机型选择合适的版本</p> <p><br></p> <p>然后需要到HBuiderX中配置微信开发者工具的位置。</p> <p></p> <p><br></p> <p><br></p> <p>击上方的工具-&gt;运行配置</p> <p>点击小程序运行配置把微信开发者工具中的安装路径复制上去就OK了。比如我的安装目录是这样子的，复制路径不需要复制.exe的文件路径。</p> <p></p> <p><br></p> <p><br></p> <p><br></p> <h2>第二步</h2> <p><br></p> <p>到微信公众平台：<a href="https://mp.weixin.qq.com/" target="_blank">https://mp.weixin.qq.com/</a> 申请小程序开发注册资格</p> <p><br></p> <p></p> <p></p> <p><br></p> <p><br></p> <p>册成功后，点击开发管理-&gt;开发设置,会看到AppID(小程序ID)，而且要生成AppSecret,这样你才能开发小程序，否则只能以测试号的模式开发，有很多不方便之处。</p> <p>拿到AppID后到HbuiderX你所导入的项目中有个<a href="http://manifest.json" target="_blank">manifest.json</a>的配置文件。如图</p> <p></p> <p><br></p> <p><br></p> <p>点击去右边有个微信小程序配置，把AppId填进去。</p> <p>然后就可以点击运行了</p> <p><br></p> <p></p> <p><br></p> <p><br></p> <p>由于是uniapp的源码，它第一次编译运行可能需要<a href="http://node.js" target="_blank">node.js</a>的环境，还需要什么scss的安装插件，HBuiderX会自动帮你下载，如果没有，你需要配置<a href="http://node.js." target="_blank">node.js.</a>。简单的说 <a href="http://Node.js" target="_blank">Node.js</a> 就是运行在服务端的 JavaScript。我们需要<a href="http://node.js" target="_blank">node.js</a>中的npm包管理工具来帮我们下载安装依赖。我们知道Spring的依赖是你在<a href="http://pom.xml" target="_blank">pom.xml</a>文件定义，然后maven帮我们自动下载引入jar包到项目中，那么npm的作用就是相当于Java中maven，可以帮我们下载依赖。</p> <p><br></p> <p>第三步 下载<a href="http://node.js" target="_blank">node.js</a>的地址: <a href="https://nodejs.org/en/" target="_blank">https://nodejs.org/en/</a></p> <p></p> <p><br></p> <p><br></p> <p><br></p> <p>由于这个网址在国外 访问速度较慢，所以我把安装包放在网盘里了。</p> <p>链接：<a href="https://pan.baidu.com/s/18oVM88LF_eBWJQcP5IzczQ?pwd=n8hc" target="_blank">https://pan.baidu.com/s/18oVM88LF_eBWJQcP5IzczQ?pwd=n8hc</a></p> <p>提取码：n8hc</p> <p>--来自百度网盘超级会员V3的分享</p> <p>里面有14、15、16、18的版本，选一个就行了，我的是16版本的，为了避免不同版本冲突，建议你也选择16版本的，下载完成后双击那个.msi文件就可以安装了，它可以自动帮你配置环境变量，安装完成后在命令行窗口(win + R) 输入npm -v看到下图是这个样子就说明安装成功了。</p> <p><br></p> <h1><span style="color: rgb(0, 0, 0);">NPM 使用介绍</span></h1> <p><br></p> <p><span style="color: rgb(51, 51, 51);">NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：</span></p> <ol> <li data-list="bullet"><span class="ql-ui"></span><span style="color: rgb(51, 51, 51);">允许用户从NPM服务器下载别人编写的第三方包到本地使用。</span></li> <li data-list="bullet"><span class="ql-ui"></span><span style="color: rgb(51, 51, 51);">允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。</span></li> <li data-list="bullet"><span class="ql-ui"></span><span style="color: rgb(51, 51, 51);">允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。</span></li> <li data-list="bullet"><span class="ql-ui"></span><span style="color: rgb(51, 51, 51);">由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 </span><strong style="color: rgb(51, 51, 51);">"npm -v" </strong><span style="color: rgb(51, 51, 51);">来测试是否成功安装。命令如下，出现版本提示表示安装成功:</span></li> </ol> <p></p> <p></p> <p><br></p> <p><br></p> <p><br></p> <p><br></p> <h2>接下来再次点击HBuider运行</h2> <p><br></p> <ol> <li data-list="bullet"><span class="ql-ui"></span>如果它提示还需要编译器，就让它自动下载，直到它可以运行为止。</li> <li data-list="bullet"><span class="ql-ui"></span>同时你打开微信开发者工具，如果你已经申请小程序开发资格，有app_id那么你可以扫码登录到你的微信开发者工具中</li> </ol> <p><br></p> <p></p> <p><br></p> <p><br></p> <ol> <li data-list="bullet"><span class="ql-ui"></span>然后点击微信开发者工具中的设置，点击安全，把服务端口打开。</li> </ol> <p><br></p> <p></p> <p><br></p> <p><br></p> <ol> <li data-list="bullet"><span class="ql-ui"></span>运行成功后，它就会自动打开微信开发者工具，第一次微信开发者工具可能会弹出你是否信任此项目的作者，点击确认然后它就能打开了。</li> </ol> <p></p> <p><br></p> </div> </body> </html>

下载 APP