原生微信小程序学习之旅(一) -来简单的使用

文章目录

      • 取消导航栏标头
      • 组件创建
        • 添加Component
        • 组件接收传入的数据
      • 页面创建(Page)
      • 关于tabBar
        • tabBar自定义样式
      • 轮播图
        • 轮播图指示点样式改变
      • 微信小程序快速获取用户信息
      • 路由跳转
        • 获取url路径中的参数
      • bindtap(click)传参
      • wx:if编写
      • 用户登陆
        • 关于默认工程
        • 目前的获取方法
        • 尝试一下服务端(登陆)
            • 初始化nodejs
          • 获取openid
          • 获取access_token
      • 视频播放
      • 二维码扫描
      • 获取到微信用户后的初始化存值(本来要数据库,最好是开通云开发)

使用的模板是
微信小程序TS基础模板,不使用云开发

取消导航栏标头

{"navigationStyle": "custom",//取消导航栏标头"usingComponents": {} //这只是添加需要用到的组件
}

在这里插入图片描述

组件创建

在这里插入图片描述

就是创建Component

添加Component
{"usingComponents": {"componentName":"componentPath"}
}
组件接收传入的数据

object.ts(pages)

<showAnimeComponent1 FanName="{{value}}" />

child.ts(components)

// components/child.ts
Component({/*** 组件的属性列表*/properties: {FanName:{type: String}},/*** 组件的初始数据*/data: {},/*** 组件的方法列表*/methods: {}
})

页面创建(Page)

在这里插入图片描述

关于tabBar

在这里插入图片描述

//app.json
{"pages": [//页面的路径"pages/index/index","pages/my/my"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"},"style": "v2","sitemapLocation": "sitemap.json","tabBar": {//主要"selectedColor": "#f00","list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "resources/images/index/home.png","selectedIconPath": "resources/images/index/homeSelect.png"},{"pagePath": "pages/my/my","text": "我的","iconPath": "resources/images/index/my.png","selectedIconPath": "resources/images/index/mySelect.png"}]}
}

注意点

  1. 这个list必须2个以上5个及以下
  2. iconPathselectedIconPath俩个标签路径的图片必须是jpg,pngjpeg的格式
tabBar自定义样式

官方文档

轮播图

微信小程序官方文档-swiper

<swiper class="indexTitleSwiper" 	indicator-dots="true"autoplay="true"interval="3000"circular="true"><swiper-item wx:for="{{indexSwiperImages}}" wx:key="index"><image src="{{item.url}}" mode=""/></swiper-item>
</swiper>
Page({data: {indexSwiperImages:['jpg文件路径,可以是相对路径','jpg文件路径,可以是相对路径',...]}
})
轮播图指示点样式改变
  • .wx-swiper-dots : 指示点容器样式
  • .wx-swiper-dots-horizontal : 水平滑动的指示点容器样式,其在.wx-swiper-dots内。
  • .wx-swiper-dot :指示点样式
  • .wx-swiper-dot-active : 当前指示点样式
/*轮播图指示点样式。indexTitleSwiper:<swiper class="indexTitleSwiper">*/
.indexTitleSwiper .wx-swiper-dot{position: relative;left: -320rpx;width: 20rpx;height: 10rpx;background-color: #fff;
}
.indexTitleSwiper .wx-swiper-dot.wx-swiper-dot-active{width: 20rpx;height: 10rpx;background-color: #f00;
}

在这里插入图片描述

微信小程序快速获取用户信息

微信官方文档

如果以上文档不能使用就用wx.login,附上微信小程序官方wx.login文档

<view><view class="myTitleBox"><image src="{{myImageUrl}}" mode="" bindtap="loginBtn"/></view>
</view>
.myTitleBox{position: absolute;left: 0;top: 0;width: 100vw;height: 30vh;background-color: yellow;display: flex;align-items: center;
}.myTitleBox image{position: relative;left: 20rpx;width: 30%;height: 50%;border-radius: 50%;background-color: rgba(200, 200, 200, 0.9);
}
//默认头像
const defaultMyUrl:string = "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"
//暂时为定,学习中

路由跳转

  • wx.navigateTo(Object object):保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
  • wx.navigateBack(Object object):返回上一级
  • wx.redirectTo(Object object): 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
  • wx.reLaunch(Object object):关闭所有页面
  • wx.switchTab(Object object):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
//最基础的页面跳转
wx.navigateTo({url:"/pages/showAnime/showAnime"
})
获取url路径中的参数
//跳转的页面的ts,比如说上面的pages/showAnime/showAnime路径
Page({data:{},onLoad(option){console.log(option)}
})

在这里插入图片描述

bindtap(click)传参

<image src="url" mode="" bindtap="functionName" data-name="value"/>
functionName(event:any){console.log(event.currentTarget.dataset.name) //event.currentTarget.dataset.name:data-name。可以是data-id那就是event.currentTarget.dataset.idwx.navigateTo({url:`urlPath`//比如:/pages/showAnime?name=${接收到的值}})}

wx:if编写

<!--pages/showAnime/showAnime.wxml-->
<view wx:if="{{otherValue == '刀剑神域'}}"><view>刀剑神域1</view>
</view>
<view wx:if="{{otherValue == '野良神'}}"><view>野良神1</view>
</view>

用户登陆

如果说你还在用wx.getUserProfile那在至少我发表的这篇文章后,这个API是用不了的

要想获取用户头像和昵称可以你在ts创建默认工程hello world中的官方获取用户信息参考论坛

关于默认工程
canIUseGetUserProfile: wx.canIUse('getUserProfile'),

发现这段是不是和wx.getUserProfile很像?我们可以试一下

尝试了以后才发现微信官方还用的是wx.getUserProfile这时我就在看它的代码的时候发现了一句话:<view wx:else> 请使用2.10.4及以上版本基础库 </view>所以我觉得最新版的确实是废弃了,但是我们可以用以前的基础库(目前还没被封杀(限制)使用以前2.10.4的库)

在这里插入图片描述

我们顺着这个思路来设置还是不行,所以我们得另想办法。。。。

目前的获取方法

其实微信开发者人员说是为了一些用户拒绝授权还是一打开页面开发者就用这个api获取微信用户个人信息啊,各种理由会删删改改很多api,可能我这个文章发布后过一段时间可能就不能这么获取了,所以大家要时常看官方文档的习惯,其实目前微信小程序官方还没有更新只是说这个废弃了。。。

在这里插入图片描述

目前我们只能按照官方的说法使用wx.login去尝试一下,但是官方的案例也是只是获取我们的code请求的话还是要另使用后端。。。那这样login只有code的功能。。。

尝试一下服务端(登陆)

服务端(登陆)很多人说像nodejs这种后端就是玩具,但是微信为了前端开发者提供的就是口中的玩具,所以不管玩不玩具你还是得学nodejs,因为nodejs语法也是javascript的一种所以会前端,学起来也不费劲

注意使用到的wx.request在开发模式下,你可以使用本地的ip(localhost)进行求求,但是发布的话,你得有个服务器或者云服务器这种而且在服务上进行服务端的开发,而且你得买域名什么的,关键是你得在网页端小程序控制台要给域名设置白名单什么的,所以没有稳定的经济来源或者给别人进行开发建议使用申请测试号和本地后端开发学习

请添加图片描述

这图是关键。很好理解

  1. (小程序上操作)使用wx.login获取code
  2. (小程序上操作)通过wx.request发送code到自己的服务端
  3. (自己的服务端)通过自己获取的code,小程序的appid,小程序的appsecret和获取的code来去请求这个微信接口
  4. (自己的服务端)把openid返回给小程序端

结论

这是注册号的wx.getUserProfile()不能用,自己申请的正式版还是可以使用的

所以只要最简单的

wx.getUserProfile({desc: '用户头像获取',success:(res)=>{console.log(res.userInfo)this.setData({})},fail:(err)=>{console.log(err)}})

即可获取到微信用户

初始化nodejs

你可以先创建main.js在执行一下指令(因为无文件默认创建的入口文件名称是index.js,这个一创建就是main.js是入口文件,当然名字随意)

npm init -y

我们使用express框架

npm i express

如果是mac系统的话执行npm得是sudo npm i express

const express = require('express')const app = express()
const port = 8088app.get('/',(req,res)=>{res.send('hello')
})app.listen(port,()=>{console.log(`${port}已开始监听`)
})

开启服务

node main.js

你可以访问一下localhost:8088

目前你可以使用小程序开始访问这个本地api

wx.request({url:`http://localhost:8088`,success:async res=>{console.log(res)}
})

在这里插入图片描述

这个data就是我们后端的数据

获取openid

在这里插入图片描述

所以我们需要引入https

npm i https
const appid= "appid"
const secret = "secret"
app.get('/getCode2Session',(req,res)=>{https.get(`https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${req.query.code}&grant_type=authorization_code`,(response)=>{response.on('data',(data)=>{console.log(data.toString())})})
})

微信小程序对接是

wx.login({success:async res=>{console.log('my code:',res.code)wx.request({url:`http://localhost:8088/getCode2Session?code=${res.code}`,success:async res=>{console.log(res)}})}
})

若出现{"errcode":40125,"errmsg":"invalid appsecret, rid: 64d4e97c-26c012bb-6555fe6f"}说明你的appsecret是有问题的或者是拼接的时候出现空格换行等操作会有问题

{"session_key":"....","openid":"...."}

这个格式的出现就说明你的请求是没问题的,后端接收到了你的openid(这个一定要保密,因为这是你的唯一凭证)

在这里插入图片描述

如果你在烦恼与怎么把它返回给小程序,你可以这么鬼才的来写

let openid = nullapp.get('/getCode2Session',async(req,res)=>{// console.log(req.query.code)https.get(`https://api.weixin.qq.com/sns/jscode2session?appid=${appid}&secret=${secret}&js_code=${req.query.code}&grant_type=authorization_code`,async(response)=>{  response.on('data',async(data)=>{let data2 = JSON.parse(data.toString()) //data.toString():将二进制转成可看的字符串;JSON.parse:将字符串转成对象openid = await data2.openid //获取openid这个openid是全局变量console.log(openid)//打印输出res.send(openid)//响应给发送请求的前端})})
})

?我们获取完openid就好了?当然不是,我们需要通过这个唯一凭证去进行用户数据的获取,可参考官方文档看不懂可以看我接下来的演示(服务端的nodejs)

获取access_token

在众多选择中,我们肯定是想要更快捷的手机登陆方式但无论怎么样都需要access_token所以我们需要再搞一个api。

app.get('/getAccessToken',(req,res)=>{let inter = nullhttps.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,(response)=>{response.on('data',async(data)=>{let data1 = await JSON.parse(data.toString())console.log('token:',data1)})})
})

官方说你最好还是保存access_token在本地但是你可以像我这样一直请求,这样的坏处是access_token一直在变化和微信小程序开发人员给我们设置的每天请求数的问题

接下来是发送手机号的问题

在这里插入图片描述

看来看去这个手机的code与之前的code是不一样的,而且需要用钱申请服务,身为没有钱的穷人开发者当然打算不去考虑了

视频播放

虽然个体的小程序可以使用video这个标签,但是你去提交版本微信工作人员审核后是不会基于通过的,所以使用这个视频插件最好小程序申请的是服务号

<video src="{{videoUrl}}" class=""/> 

二维码扫描

获取到微信用户后的初始化存值(本来要数据库,最好是开通云开发)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/189237.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Python】二维码和条形码的识别

我主要的问题就在于无法识别图片 注意事项&#xff1a; 1、从文件中加载图像的时候注意图片尽量用英文来命名&#xff0c;因为中文无法识别到图片 2、使用绝对地址的时候要用两个双斜杠&#xff0c;因为用一个会被识别为Unicode 转义&#xff0c;但是并没有后续的合法 Unico…

回归预测 | Matlab实现PCA-PLS主成分降维结合偏最小二乘回归预测

回归预测 | Matlab实现PCA-PLS主成分降维结合偏最小二乘回归预测 目录 回归预测 | Matlab实现PCA-PLS主成分降维结合偏最小二乘回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现PCA-PLS主成分降维结合偏小二乘回归预测&#xff08;完整源码和数据) 1.输…

机器学习——逻辑回归

目录 一、分类问题 监督学习的最主要类型 二分类 多分类 二、Sigmoid函数 三、逻辑回归求解 代价函数推导过程&#xff08;极大似然估计&#xff09;&#xff1a; 交叉熵损失函数 逻辑回归的代价函数 代价函数最小化——梯度下降&#xff1a; ​编辑 正则化 四、逻辑…

pyqt环境搭建

创建虚拟环境 # 用管理员身份运行 conda create --prefixE:\Python\envs\pyqt5stu python3.6 # 激活虚拟环境 conda activate E:\Python\envs\pyqt5stu # 退出虚拟环境 conda deactivate安装包 pip install PyQt5 -i https://pypi.douban.com/simple pip install PyQt5-tools…

关于maven读取settings.xml文件的优先级问题

今天在IDEA中配置maven的setting.xml文件路径指向的.m2路径下的setting_a.xml文件&#xff0c;同时&#xff0c;我的maven3.6.3也放在.m2中。 [1] .m2文件夹 [2] apache-maven-3.6.3文件夹 然后&#xff0c;在IDEA中打包发布时发现&#xff0c;无论如何都读取不到指定的settin…

Sectigo SSL

Sectigo&#xff08;前身为ComodoCA&#xff09;是全球在线安全解决方案提供商和全球最大的证书颁发机构。为了强调其在SSL产品之外的扩张&#xff0c;Comodo在2018年更名为Sectigo。新名称减少了市场混乱&#xff0c;标志着公司向创新的全方位网络安全解决方案提供商过渡。 S…

Python基础入门例程52-NP52 累加数与平均值(循环语句)

最近的博文&#xff1a; Python基础入门例程51-NP51 列表的最大与最小(循环语句)-CSDN博客 Python基础入门例程50-NP50 程序员节&#xff08;循环语句&#xff09;-CSDN博客 Python基础入门例程49-NP49 字符列表的长度-CSDN博客 目录 最近的博文&#xff1a; 描述 输入描…

FPGA运算

算数运算中&#xff0c;输入输出的负数全用补码来表示&#xff0c;例如用三位小数位来表示的定点小数a-1.625和b-1.375。那么原码分别为a6b‘101101, b6b101011, 补码分别是a6’b110011&#xff0c;b6‘b110101&#xff1b; 如果想在fpga中实现a*b&#xff0c;则需要将a和b用补…

MySQL:日志系统

目录 概述错误日志&#xff08;error log&#xff09;慢查询日志&#xff08;slow query log&#xff09;一般查询日志( general log )中继日志&#xff08;relay log&#xff09;Buffer Pool 缓存回滚日志&#xff08;undo log)概述undo log 作用undo log 的存储机制Undo log …

万能在线预约小程序系统源码 适合任何行业在线预约小程序+预约到店模式 带完整的搭建教程

大家好啊&#xff0c;源码小编又来给大家分享啦&#xff01;随着互联网的发展和普及&#xff0c;越来越多的服务行业开始使用在线预约系统以方便客户和服务管理。例如&#xff0c;美发店、健身房、餐厅等都可以通过在线预约系统提高服务效率&#xff0c;减少等待时间&#xff0…

计算机课设python项目matplotlib数据可视化分析代码以及数据文档+自动化selenium实现boss网站爬虫代码

这是一个数据分析可视化课程的结课作业设计&#xff0c;受人所托写的&#xff0c;现在分享出来&#xff0c;有需要的同学自取哈&#xff0c;以下是文件目录&#xff0c;包括数据分析和爬虫代码都有&#xff0c;下载下来当一个demo也还是不错的&#xff0c;这篇博客就是文档里的…

博客积分上一万一千了

博客积分上一万一千了 充满自信&#xff0c;继续前进。

《QT从基础到进阶·十八》QT中的各种鼠标事件QEvent

1、界面标题栏事件&#xff1a; NonClientAreaMouseButtonPress 标题栏点击事件 NonClientAreaMouseButtonRelease 标题栏释放事件 bool CustomPopDialog::event(QEvent* event) {switch (event->type()){case QEvent::MouseButtonRelease://Event of mouse releasing wind…

移动硬盘和u盘的区别哪个好 移动硬盘和u盘有啥区别

在数字时代的今天&#xff0c;数据存储已经成为我们生活中的重要一环。当我们需要移动、备份或传输大量数据时&#xff0c;常常会不知道是选择移动硬盘还是U盘。其实&#xff0c;对于许多人来说&#xff0c;移动硬盘和U盘之间的区别并不清晰。下面我们就来看移动硬盘和u盘的区别…

web3 React Dapp书写订单 买入/取消操作

好 上文web3 前端dapp从redux过滤出 (我创建与别人创建&#xff09;正在执行的订单 并展示在Table上中 我们过滤出了 我创建的 与 别人创建的 且 未完成 未取消的订单数据 这边 我们起一下 ganache 环境 ganache -d然后 我们项目 发布一下智能合约 truffle migrate --reset然…

Yum配置、相关命令和常见问题

搭建光盘源 将系统盘读取出来&#xff0c;找到系统盘下存放软件包的目录 2.配置yun仓库 输入命令进入仓库编辑 #必须以.repo结尾 :wq 回车保存退出 3.命令行输入yum repolist 查看yum仓库 配置硬盘源 1.将硬盘源拷贝到目录&#xff0c;或者挂载到目录 2.指定repo文件baseu…

TCSVT(IEEE Transactions on Circuits and Systems for Video Technology)期刊投稿指南

目录 TCSVT 期刊简介 TCSVT 期刊影响因子和分区​ 期刊官方网站 期刊投稿网址 投稿指南网址 稿件格式要求 稿件提交指南 A. 提交稿件 B. 手稿格式 C. 摘要指南 D. 提交图形的指南 E. 页面和彩色图形费用 TCSVT 期刊简介 IEEE Transactions on Circuits and Systems…

No183.精选前端面试题,享受每天的挑战和学习

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入…

伦敦金股票代码是什么?

伦敦金是跟踪实时的现货黄金价格走势的差价合约交易&#xff0c;它的代码一般是LLG、GOLD&#xff0c;但也有一些货币交易平台会显示为XAU。伦敦金不是股票交易&#xff0c;因此没有四位数或六位数的股票代码&#xff0c;但伦敦金交易品种单一&#xff0c;投资者不用在数千支股…

深度学习之基于Pytorch框架的MNIST手写数字识别

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 MNIST是一个手写数字识别的数据集&#xff0c;是深度学习中最常用的数据集之一。基于Pytorch框架的MNIST手写数字识…