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

news2024/12/29 6:58:30

文章目录

      • 取消导航栏标头
      • 组件创建
        • 添加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.coloradmin.cn/o/1199411.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

海外媒体发稿：彭博社发稿宣传中，5种精准营销方式

海外媒体发稿：彭博社发稿宣传中，5种精准营销方式

在如今的信息发生爆炸时期&#xff0c;营销方式多种多样&#xff0c;但是充分体现精准营销并针对不同用户群体的需求并非易事。下面我们就根据彭博社发稿营销推广为例子&#xff0c;给大家介绍怎样根据不同用户人群方案策划5种精准营销方式。 1.界定总体目标用户人群在制订精准…
阅读更多...
通过设置响应头解决跨域问题

通过设置响应头解决跨域问题

网上很多文章都是告诉你直接Nginx添加这几个响应头信息就能解决跨域&#xff0c;当然大部分情况是能解决&#xff0c;但是我相信还是有很多情况&#xff0c;明明配置上了&#xff0c;也同样会报跨域问题。 这大概率是因为&#xff0c;服务端没有正确处理预检请求也就是OPTIONS请…
阅读更多...
设计模式之--原型模式(深浅拷贝)

设计模式之--原型模式(深浅拷贝)

原型模式 缘起 某天&#xff0c;小明的Leader找到小明:“小明啊&#xff0c;如果有个发简历的需求&#xff0c;就是有个简历的模板&#xff0c;然后打印很多份&#xff0c;要去一份一份展示出来&#xff0c;用编程怎么实现呢&#xff1f;” 小明一听&#xff0c;脑袋里就有了…
阅读更多...
matlab 小波自适应阈值去噪

matlab 小波自适应阈值去噪

1、内容简介 略 12-可以交流、咨询、答疑 小波自适应阈值去噪 2、内容说明 小波自适应阈值一维信号去噪&#xff0c;也包含软阈值和硬阈值 硬阈值、软阈值、自适应阈值 3、仿真分析 略 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/s/1yQ1yDfk-_Qnq7tGpa23L…
阅读更多...
【LeetCode:715. Range 模块 | 线段树】

【LeetCode:715. Range 模块 | 线段树】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
如何查看反汇编（VS）

如何查看反汇编（VS）

如何查看反汇编 1. 设置断点2. 运行到该处3. 右键 反汇编结果 1. 设置断点 2. 运行到该处 3. 右键 反汇编 结果 即可跳转查看反汇编
阅读更多...
kubernetes--pod详解

kubernetes--pod详解

目录 一、pod简介&#xff1a; 1. Pod基础概念&#xff1a; 2. Kubrenetes集群中Pod的两种使用方式&#xff1a; 3. pod资源中包含的容器&#xff1a; 4. pause容器的两个核心功能&#xff1a; 5. Kubernetes中使用pause容器概念的用意&#xff1a; 二、pod的分类&#xff1a…
阅读更多...
springboot模板引擎

springboot模板引擎

1.服务端渲染时相比与前后端分离开发 原理是 跳过前端这一层 直接到服务端 通过数据和模板 生成页面返回前端 springboot包含如下模板引擎 典型如thymeleaf 1>导入依赖 2>查看路径 模板页面在 public static final String DEFAULT_PREFIX “classpath:/templates/”; 即…
阅读更多...
便捷Benchmark.sh 自动匹配workload（自用）

便捷Benchmark.sh 自动匹配workload（自用）

​ 因为db_bench选项太多&#xff0c;而测试纬度很难做到统一&#xff08;可能一个memtable大小的配置都会导致测试出来的写性能相关的的数据差异很大&#xff09;&#xff0c;所以官方给出了一个benchmark.sh脚本用来对各个workload进行测试。 该脚本能够将db_bench测试结果中…
阅读更多...
华为ensp：开启rstp修改根网桥

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

开启rstp 首先去三台交换机上进入系统视图分别开启rstp模式 stp mode rstp 三台交换机上都执行这个命令&#xff0c;就开启rstp模式了 修改根网桥 现在进入要被修改的交换机的系统视图 stp priority 4096 这里我们修改只要比别的交换机数值小就可以&#xff0c;最小的就是…
阅读更多...
（二）正点原子I.MX6ULL u-boot移植

（二）正点原子I.MX6ULL u-boot移植

一、概述 这里使用的是NXP官方2022.04发布的uboot&#xff0c;移植到正点原子阿尔法开发板&#xff08;v2.1&#xff09; u-boot下载&#xff1a;gitgithub.com:nxp-imx/uboot-imx.git 移植是基于NXP的mx6ull_14x14_evk 二、编译NXP官方uboot 进入NXP的u-boot目录 先在Makefile…
阅读更多...
linux 下非sudo安装cmake

linux 下非sudo安装cmake

1.查看位数 getconf LONG_BIT2.下载对应压缩包 Download CMake Source Distribution 未编译源代码 Binary Distribution已经编译好的 3.解压至文件夹 tar -zxvf cmake-3.28.0-rc4-linux-x86_64.tar.gz 4.添加环境变量 vi ~/.bashrc 最后一行添加 写到bin目录 export P…
阅读更多...
深度解析NLP定义、应用与PyTorch实战

深度解析NLP定义、应用与PyTorch实战

1. 概述 文本摘要是自然语言处理&#xff08;NLP&#xff09;的一个重要分支&#xff0c;其核心目的是提取文本中的关键信息&#xff0c;生成简短、凝练的内容摘要。这不仅有助于用户快速获取信息&#xff0c;还能有效地组织和归纳大量的文本数据。 1.1 什么是文本摘要&#x…
阅读更多...
从HDFS到对象存储，抛弃Hadoop，数据湖才能重获新生？

从HDFS到对象存储，抛弃Hadoop，数据湖才能重获新生？

Hadoop与数据湖的关系 1、Hadoop时代的落幕2、Databricks和Snowflake做对了什么3、Hadoop与对象存储&#xff08;OSD&#xff09;4、Databricks与Snowflake为什么选择对象存储5、对象存储面临的挑战 1、Hadoop时代的落幕 十几年前&#xff0c;Hadoop是解决大规模数据分析的“白…
阅读更多...
大数据治理运营整体解决方案：PPT全文39页，附下载

大数据治理运营整体解决方案：PPT全文39页，附下载

关键词&#xff1a;大数据&#xff0c;数据治理&#xff0c;数据治理解决方案&#xff0c;数据治理的目的和意义 一、数据治理的定义 数据治理专注于将数据作为企事业单位数据资产进行应用和管理的一套管理机制&#xff0c;能够消除数据的不一致性&#xff0c;建立规范的数据应…
阅读更多...
【算法】算法题-20231110

【算法】算法题-20231110

一、力口&#xff1a;506. 相对名次 简单 给你一个长度为 n 的整数数组 score &#xff0c;其中 score[i] 是第 i 位运动员在比赛中的得分。所有得分都 互不相同 。 运动员将根据得分 决定名次 &#xff0c;其中名次第 1 的运动员得分最高&#xff0c;名次第 2 的运动员得分第…
阅读更多...
【ARM入门】ARM、SOC、ARM授权 概念篇

【ARM入门】ARM、SOC、ARM授权 概念篇

什么是ARM ARM前身是Acorn公司设计的第一款微处理器&#xff0c;叫ARM&#xff1a;Acorn RISC Machine ARM公司的名字叫ARM&#xff1a;Advanced RISC Machines ARM内核 包括了寄存器组、指令集、总线、存储器映射规则、中断逻辑和调试组件等 内核是有ARM公司设计并以销售方…
阅读更多...
HarmonyOS 高级特性

HarmonyOS 高级特性

引言 本章将探讨 HarmonyOS 的高级特性&#xff0c;包括分布式能力、安全机制和性能优化。这些特性可以帮助你构建更强大、更安全、更高效的应用。 目录 HarmonyOS 的分布式能力HarmonyOS 的安全机制HarmonyOS 的性能优化总结 1. HarmonyOS 的分布式能力 HarmonyOS 的分布…
阅读更多...
视频批量剪辑：视频嵌套合并实战指南，剪辑高手速成秘籍

视频批量剪辑：视频嵌套合并实战指南，剪辑高手速成秘籍

随着社交媒体的兴起&#xff0c;视频制作的需求越来越广泛。无论是个人用户还是专业团队&#xff0c;都需要对视频进行剪辑以符合其需求。而在这个过程中&#xff0c;批量剪辑视频的能力就变得至关重要。视频批量剪辑是指在一次操作中处理多个视频文件的剪辑。通过使用专业的视…
阅读更多...
海康Visionmaster-环境配置：CSharp 二次开发环境配 置方法

海康Visionmaster-环境配置：CSharp 二次开发环境配 置方法

C#二次开发环境的配置方法 以 WinForm 为例&#xff0c;进行 VM 二次开发的环境配置分为三步&#xff1a; 第一步&#xff0c;使用 VS 新建一个框架为.NET Framework 4.6.1 的工程&#xff0c;平台首选 32 位取消勾选&#xff0c;重新生成解决方案&#xff0c;保证工程 Debug 下…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023