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

文章目录

      • 取消导航栏标头
      • 组件创建
        • 添加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. iconPath和selectedIconPath俩个标签路径的图片必须是jpg,png和jpeg的格式
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.id
    wx.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 = 8088

app.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 = null

app.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 = null
    https.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.mfbz.cn/a/135523.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

python 中用opencv开发虚拟键盘------可以只选择一个单词不会出现一下选择多个

python 中用opencv开发虚拟键盘------可以只选择一个单词不会出现一下选择多个

一. 介绍 OpenCV是最流行的计算机视觉任务库&#xff0c;它是用于机器学习、图像处理等的跨平台开源库&#xff0c;用于开发实时计算机视觉应用程序。 CVzone 是一个计算机视觉包&#xff0c;它使用 OpenCV 和 Media Pipe 库作为其核心&#xff0c;使我们易于运行&#xff0c…
阅读更多...
Apache和Nginx实现虚拟主机的3种方式

Apache和Nginx实现虚拟主机的3种方式

目录 首先介绍一下Apache和nginx&#xff1a; Nginx和Apache的不同之处&#xff1a; 虚拟主机 准备工作 Apache实现&#xff1a; 方法1&#xff1a;使用不同的ip来实现 方法2&#xff1a;使用相同的ip&#xff0c;不同的端口来实现 方法3&#xff1a;使用相同的ip&…
阅读更多...
解决游戏找不到x3daudio1_7.dll文件的5个方法，快速修复dll问题

解决游戏找不到x3daudio1_7.dll文件的5个方法，快速修复dll问题

在电脑使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“x3daudio1_7.dll丢失”。这个错误通常会导致软件游戏无法正常启动运行。为了解决这个问题&#xff0c;我们需要采取一些措施来修复丢失的文件。本文将详细介绍解决x3daudio1_7.dll丢失的方法…
阅读更多...
企业云盘与个人云盘：区别与特点一览

企业云盘与个人云盘：区别与特点一览

企业云盘是企业在寻找文件协同工具的过程中绕不开的一个选项。企业为什么需要专门购置企业网盘&#xff0c;个人云盘能否满足企业的文件协作需求呢&#xff1f;企业云盘和个人云盘有什么区别呢&#xff1f; 企业云盘与个人云盘的区别 1、使用对象&#xff1a;顾名思义&#xf…
阅读更多...
Java 简单实现一个 TCP 回显服务器

Java 简单实现一个 TCP 回显服务器

文章目录 TCP 服务端TCP 客户端实现效果TCP 服务端(实现字典功能)总结 TCP 服务端 package network;import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Soc…
阅读更多...
【C++】C++入门详解 II【深入浅出 C++入门 这一篇文章就够了】

【C++】C++入门详解 II【深入浅出 C++入门 这一篇文章就够了】

C入门 七、引用&#xff08;一&#xff09;引用 概念&#xff08;1&#xff09;引用 概念&#xff08;2&#xff09;引用 使用★☆&#xff08;3&#xff09;引用 特性&#xff08;4&#xff09;常引用 &#xff08;二&#xff09;引用的 实际应用 及 其意义☆&#xff08;1&am…
阅读更多...
合肥中科深谷嵌入式项目实战——基于ARM语音识别的智能家居系统（一）

合肥中科深谷嵌入式项目实战——基于ARM语音识别的智能家居系统（一）

基于ARM语音识别的智能家居系统 我们接下来带大家完成基于语音识别的智能家居系统嵌入式项目实战&#xff0c;使用到stm32开发板&#xff0c;讯飞的离线语音识别&#xff0c;我们在此之前&#xff0c;我们先学习一些Linux系统的基本操作。 。 一、Linux简介 在嵌入式开发中&am…
阅读更多...
matlab 二自由度操纵稳定性汽车模型

matlab 二自由度操纵稳定性汽车模型

1、内容简介 略 19-可以交流、咨询、答疑 二自由度操纵稳定性汽车模型 二自由度、操纵稳定性、操纵动力学 2、内容说明 1 模型假设 忽略转向系的影响&#xff0c;以前、后轮转角作为输入&#xff1b;汽车只进行平行于地面的平面运动&#xff0c;而忽略悬架的作用&#xf…
阅读更多...
从虚拟机下载开始的kubeSphere安装

从虚拟机下载开始的kubeSphere安装

目录 一、虚拟机安装 二、镜像下载安装 1、镜像下载 2、虚拟机创建 3、虚拟机系统安装 三、虚拟机配置 1、IP固定 2、配置yum阿里源 3、关闭防火墙 4、 关闭selinux 5、 禁止swap交换 6、内核参数修改 7、设置kubernetes源 四、docker安装 五、虚拟机分组 六、…
阅读更多...
华为ensp：开启rstp修改根网桥

华为ensp：开启rstp修改根网桥

开启rstp 首先去三台交换机上进入系统视图分别开启rstp模式 stp mode rstp 三台交换机上都执行这个命令&#xff0c;就开启rstp模式了 修改根网桥 现在进入要被修改的交换机的系统视图 stp priority 4096 这里我们修改只要比别的交换机数值小就可以&#xff0c;最小的就是…
阅读更多...
振南技术干货集：研发版本乱到“妈不认”? Git!（4）

振南技术干货集：研发版本乱到“妈不认”? Git!（4）

注解目录 1、关于 Git 1.1Git 今生 (Git 和 Linux 的生父都是 Linus&#xff0c;振南给你讲讲当初关于 Git 的爱恨情愁&#xff0c;其背后其实是开源与闭源两左阵营的明争暗斗。) 1.2Git的爆发 (Git 超越时代的分布式思想。振南再给你讲讲旧金山三个年轻人创办 GitHub&…
阅读更多...
（一）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB

（一）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB

一、七种算法&#xff08;DBO、LO、SWO、COA、LSO、KOA、GRO&#xff09;简介 1、蜣螂优化算法DBO 蜣螂优化算法&#xff08;Dung beetle optimizer&#xff0c;DBO&#xff09;由Jiankai Xue和Bo Shen于2022年提出&#xff0c;该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁…
阅读更多...
Java 简单实现一个 UDP 回显服务器

Java 简单实现一个 UDP 回显服务器

文章目录 UDP 服务端UDP 客户端实现效果UDP 服务端(实现字典功能)总结 UDP 服务端 package network;import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.SocketException;public class UdpEchoServer {private Da…
阅读更多...
如何判断从本机上传到服务器的文件数据内容是一致的？用md5加密算法！

如何判断从本机上传到服务器的文件数据内容是一致的？用md5加密算法！

问题场景 最近在帮导师做横向&#xff0c;我想把整个项目环境放到服务器中&#xff0c;需要把一个很大的数据文件传到服务器&#xff0c;传上去很方便&#xff0c;但是涉及到文件的压缩上传和服务器内解压环节&#xff0c;不是太确定文件在本机和服务器的数据内容是否一致。 解…
阅读更多...
C/C++调试工具 - gdb详解

C/C++调试工具 - gdb详解

C/C调试工具 -gdb详解 1 简介 2 常用的命令 3 使用的条件 4 程序调试 4.1 直接运行程序 4.2 断点调试(在某一行) 4.3 断点调试(在函数入口处打断点) 5 调试core文件 5.1 生成core文件的方法 5.2 调试core文件 1 简介 GDB是Linux下非常好用且强大的调试工具。GD…
阅读更多...
使用 Ruby 的 Nokogiri 库来解析

使用 Ruby 的 Nokogiri 库来解析

爬虫程序的主要目标是获取指定网站上的数据。在这里&#xff0c;我们将使用 Ruby 的 Nokogiri 库来解析 HTML&#xff0c;并使用 HTTParty 库来发送 HTTP 请求。下面是一个简单的示例&#xff0c;演示如何使用 Ruby 编写一个爬虫程序来爬取 1688 网站的数据。 require nokogir…
阅读更多...
CentOS 7上Root用户使用ifconfig命令无结果

CentOS 7上Root用户使用ifconfig命令无结果

假如遇到如下情况&#xff0c;在CentOS 7上使用root用户运行ifconfig命令没有结果&#xff0c;如图所示&#xff1a; 这可能是因为缺少网络工具包或ifconfig命令不在root用户的PATH环境变量中。 可以尝试以下解决方法&#xff1a; 1.检查PATH环境变量&#xff1a;确保PATH环境…
阅读更多...
域名无法访问了，如何找回浏览器的缓存

域名无法访问了，如何找回浏览器的缓存

背景需求 双十一即将来临&#xff0c;这意味着我购买了三年低配的阿里服务器&#xff0c;而它的服务期限也即将到期。为了提前做好准备&#xff0c;我在一周前对静态网站进行了备份&#xff0c;并成功地使用了Vercel进行部署&#xff08;已经有了域名&#xff09;。相比于付费…
阅读更多...
MySQL join原理及优化

MySQL join原理及优化

MySQL的JOIN原理是基于索引和算法的。在执行JOIN查询时&#xff0c;MySQL会根据连接字段上的索引来查找匹配的记录。 这种算法在链接查询的时候&#xff0c;驱动表会根据关联字段的索引进行查找&#xff0c;当在索引上找到了符合的值&#xff0c;再回表进行查询&#xff0c;也就…
阅读更多...
【STM32】TIM2的PWM：脉冲宽度调制--标准库

【STM32】TIM2的PWM：脉冲宽度调制--标准库

注意点&#xff1a; TIM_Period---->指要进行比较的值Compare TIM_Prescaler----> 指要进行分频的值【分频值/原始时钟值】 PWM是一种周期固定&#xff0c;脉宽可调整的输出波形。 https://www.cnblogs.com/brianblog/p/7117896.html 0.通用寄存器输出 1.捕获/比较通道…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站