小程序
du_独孤九剑
这个作者很懒,什么都没留下…
展开
-
小程序场景值
对于小程序,可以在 App 的 onLaunch 和 onShow,或wx.getLaunchOptionsSync 中获取上述场景值。对于小游戏,可以在 wx.getLaunchOptionsSync 和 wx.onShow 中获取上述场景值基于场景下判断 新版本是否更新从朋友圈进入小程序 无法获取本地存储的登录信息 // 不兼容 api 场景1154: 朋友圈内打开“单页模式” if(e.scene!=1154){ //版本更新 const u..原创 2021-09-20 17:22:19 · 512 阅读 · 0 评论 -
文本超出显示省略号...,设置超出两行省略号换行不生效的问题
参考文章在小程序中 当我们需要设置 横向滚动 内部元素对文字进行省略 换行 这个需求时 无效BUG 分析:scrcoll-view 要想实现横向滚动 有坑 需要假下列代码 导致我们 换行失效的 一句代码white-space: nowrap;具体参考scoll-view 横向滚动实现如何填坑文子显示省略号 换行 代码一行white-space:nowrap;/*规定段落中的文本不进行换行*/overflow:hidden;/*内容会被修剪,并且其余内容是不可见的。*原创 2021-09-18 15:04:41 · 1304 阅读 · 0 评论 -
原生小程序合集
小程序的版本预览版本 编译器上看开发版本 添加过开发者人员可看 可以切换体验版本体验版本 体验成员审核版本 提交审核线上版本微信小程序基本框架的构成wxmlwxsswxsjs小程序的模板// xml<template name="template"> <view> <view>收件人:{{name}}</view> <view>联系方式:{{p原创 2021-09-11 15:23:57 · 439 阅读 · 0 评论 -
小程序 web-view 使用
web-view 组件是一个可以用来惩戒网页的容器 会自动铺满整个小程序页面 注意个人类型 与 海外类型 的小程序 暂不支持使用<web-view src = "https://mp.weixin.qq.com/"> </web-view>如果想在H5 页面调用小程序提供的一些接口 就必须在H5页面中引入JS<script src="https:res.wx.qq.com/open/js/jweixin-1.3.3.js"></script&g.原创 2021-09-10 13:23:57 · 212 阅读 · 0 评论 -
小程序 购物车添加
功能描述 在详情页里 点击加入购物车进入购物车页面 之前 需要判断当前页面是否登录如果登录了 看是否有购物车商品 展示由于在调用接口时 token传给后台 登录检测功能是后台判断好的前端只要拿到状态码返回的code码 200 403 决定提示的内容即可...原创 2021-09-10 12:40:31 · 164 阅读 · 0 评论 -
小程序获取用户信息(昵称 .头像.电话号码)
获取用户信息(头像和昵称)获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。 没有授权不能直接调用 wx.getUserProfile(Object object)如果已经授权 直接调用 API 获取 wx.getUserProfile(Object object)注意:调用API 之前一定要检测 用户是否授权 wx.getSetting()获取用户的电话号码场景描述一键原创 2021-09-09 21:42:15 · 1563 阅读 · 0 评论 -
小程序生成骨架屏
骨架屏 点击右下角三个点 生成骨架屏 有两个文件 (骨架屏的模板文件 和样式和文件)把模板和样式引入到页面中<import src="./sort.skeleton.wxml"/><template is="skeleton"/>@import 'sort.skeleton.wxss';把模板和实际内容 二选一出现 定义一个load变量 判断数据是否加载完成全局配置 骨架屏的样式 页面样式会覆盖全局// project.config.jso原创 2021-09-09 13:12:42 · 321 阅读 · 0 评论 -
小程序的webVIew
HTML iframe标签配置:个人类型是不执行;其实:HTML CSS JS 页面!uniapp:vue的写小程序;原生:提供的组件写小程序;原创 2021-07-13 17:48:04 · 112 阅读 · 0 评论 -
公众号关联小程序
进入公众号后台进行关联在 小程序后台 开启 公众号 关注组件组件:用于展示关联的公告号推荐<official-account></official-account>原创 2021-07-13 17:43:52 · 122 阅读 · 0 评论 -
小程序日历
官方文档下载 github 并解压缩,拷贝 calendar 文件到小程序项目下需要自己新建一个文件夹:第三方公共组件自己的组件;注册组件:{ "usingComponents": { "calendar": "/component/calendar/index" }}wxml:<calendar />...原创 2021-07-08 15:43:53 · 126 阅读 · 0 评论 -
小程序f2图表
f2图表官网地址F2 是一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(Node,小程序,Weex),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验// 安装npm i @antv/f2-canvas工具构建配置:页面中注册:{ "usingComponents": { "ff-canvas": "@antv/f2-canvas" }}JS初始化:// import F2 fro原创 2021-07-08 14:13:53 · 762 阅读 · 0 评论 -
小程序项目核心点总结
图片上传大小问题图片:静态页:帮助我们搭建页面;JS:图片信息都是后台返给我的图片地址!就想预览:可以把本地图片上传到公司的服务器,把图片地址都给我;现在没有服务器;v2样式去掉 否则设置的样式有问题 权重不够 两种方式 important 和删掉事件事件默认是在冒泡阶段执行 (bind)如果在冒泡阶段 发现父辈的节点也注册同样的事件 父级事件函数也会执行小程序捕获错误 App({ // 生命周期:函数,内置的;特点:会在特定的节点执行原创 2021-07-08 13:49:48 · 167 阅读 · 0 评论 -
小程序canvas
在wxml 文件中放置一个 canvas组件 并设置 canvas-id属性调用wx.createCanvasCantext方法创建画布上下文 该方法的参数值就是 canvas组件 canvas-id属性值调用画布上下文对象中的相应的方法绘制图形原创 2021-07-03 17:32:34 · 249 阅读 · 0 评论 -
小程序动画
小程序允许使用wx.createAnimation方法创建Animation对象 并通过animation属性与某个组件绑定来展示动画效果 小程序支持常用的动画效果 例如旋转 移动 缩放 倾斜如果是并行动画(例如 旋转 缩放动画同时执行)不断调用Animation对象的动画方法即可 如果是串行动画 每次调用动画的方法后 都需要调用step()方法后 然后在调用其他的动画方法<view> <image animation="{{animation}}" src="http原创 2021-07-03 14:21:37 · 213 阅读 · 0 评论 -
小程序骚操作
使用 app.json创建页面按照我们平常的开发习惯,创建一个新的页面,一般都会先创建文件夹,再创建对应page的形式,创建完成后,app.json中会自动注册该页面。实际上,我们还可以通过直接在app.json中注册页面来生成对应的page。"pages": [ "pages/index/index", "pages/newpage/newpage" ],善用编译模式组件复用小程序样式这一点经常被遗忘,因为新建component的时候,小程序并不会展示该配置项。配转载 2021-06-28 13:35:49 · 567 阅读 · 0 评论 -
小程序网络请求
wx.request 发起的HTTPS网络请求 默认超时时间和最大时间都是60s 超时时间可以在app.json中设置一个小程序同时只能有5个网络请求连接wx:request({ url:'test/jj.php', data:{ x:"", y:"", }, header:{ content-type:'appliccation/json' //默认值 }, success(res){ console.log(res.data) } })服务器最终.原创 2021-06-25 16:11:21 · 225 阅读 · 0 评论 -
小程序腾讯地图(一)
项目需求定位当前位置手动选择当前定位 (逆地址解析)地图用的腾讯地图腾讯地图腾旭地图官网创建Key 值小程序地图sdk文档// 引入SDK核心类,js文件根据自己业务,位置可自行放置var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');var qqmapsdk;Page({ onLoad: function () { // 实例化API核心类 qqmapsdk = new Q原创 2021-03-27 20:29:05 · 444 阅读 · 0 评论 -
小程序使用 scroll-view 组件 坑
wxml<view class="czCard"> <scroll-view class="cardList" scroll-x> <view class="itembox" wx:for="{{8}}" > <view class="box"> {{index}} </view> </view> </scroll-view></view>..原创 2021-03-23 21:16:30 · 235 阅读 · 0 评论 -
小程序 map 地图组件
要设置 宽度 高度<map id="myMap" markers="{{markers}}" style="width:100%;height:300px;" longitude="116.313972" latitude="39.980014" scale='16'></map>原创 2021-06-25 15:51:18 · 77 阅读 · 0 评论 -
vant-weapp 组件 样式的覆盖(一)
最近在小程序开发中使用到 vant-weapp 组件 但有些样式不符合自己的项目要求 需要对样式进行覆盖以DropdownMenu组件为例 需求是用户选择菜单项 菜单文字变成 橙色样式的修改 就是以权重高的 覆盖权重低的<view style="{{container }}"><van-dropdown-menu style="{{ buttonStyle }}" > <van-dropdown-item value="{{ value1 }}" bin原创 2021-04-05 12:56:05 · 1222 阅读 · 0 评论 -
vant-weapp 组件 样式的覆盖(二)
最近项目中用到了 vant 组件 但是需要对组件进行样式定制 才能满足我的需求以 tab 标签为例 我需要对 背景颜色 和tab 标题进行修改修改完成 效果主要是用了官方提供的外部样式类 <view class="tab-page"> <van-tabs nav-class="sdk" tab-class='tab' active="{{ active }}" bind:change="onChange"> <.原创 2021-04-11 16:25:57 · 1079 阅读 · 0 评论 -
小程序 获取openid
code2Session 获取用户唯一 openid登录凭证校验 通过wx.login() 接口 获的临时凭证 code 后传到开发者服务器调用此接口完成登录流程wx.login({ success (res) { if (res.code) { //发起网络请求 wx.request({ url: '自己的服务器请求接口', data: { code: res.code } })原创 2021-03-22 22:24:32 · 208 阅读 · 0 评论 -
小程序 使用vant-weapp 组件
一、电脑需要下载 node.js二、下载npm通过npm 安装npm init -ynpm i @vant/weapp -S --production修改 app.json将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。修改 project.config.json构建 npm 包打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可.原创 2021-04-03 18:29:10 · 110 阅读 · 0 评论 -
小程序文件上传和预览
图片上传// 选择图片 wx.chooseImage({ success(res) { const urls = res.tempFilePaths for (var i = 0; i < urls.length; i++) { // 上传图片 wx.uploadFile({ url:原创 2021-04-10 13:27:26 · 147 阅读 · 0 评论 -
小程序 Tab栏切换组件
核心 主要用到了 swiper组件属性类型说明currentNumber当前滑块的 index 默认为0current-item-idString当前滑块的 item-id 不能同时指定 currentbindchangeEventHandlecurrent 改变时会触发 change 事件效果wxl<view class="wrapper"> <view class="head"> &l.原创 2021-06-10 23:04:40 · 223 阅读 · 0 评论 -
小程序 模块 模板 缓存
模板新建post 文件夹 下 创建 post-item.wxss 和 post-item-wxmltemplate 模板相关内容必须包裹 template 标签内 使用 name 属性指定 template 模板名 这个模板名将在引用时使用template 模板 is 是指定要使用那个模板template 模板 data属性 可以向template 传入数据 wx:for="" =>传递 data ="{{item}}" <template name="postItemId原创 2021-06-23 16:31:47 · 86 阅读 · 0 评论 -
小程序登录详解
小程序登录的三个角色小程序用户使用客户端 由于小程序运行在微信之上 因此小程序可以通过API获取微信用户的身份信息开发服务器 小程序的后端服务器 用于用户提供服务微信接口服务 为开发者提供接口服务小程序获取 code在小程序中通过 wx.login() 获取登录凭证 code code由小程序内部自动生成 每次调用 wx.login() 获取的code 都不同 需要注意的是 code的有效期为为五分钟 且被微信接口验证一次就失效发送code小程序将code 发送给开发者服.原创 2021-06-24 19:41:27 · 5570 阅读 · 0 评论 -
小程序获取地址
原生wx.chooseAress() 方法调起用户编辑收货地址元神界面 并在编辑完成后返回应用的某个页面 wx.chooseAress({ success(res){ } })第二种 提交订单时 用户创建地址传给后台 后端返回原创 2021-06-24 20:43:28 · 148 阅读 · 0 评论 -
小程序上传图片
官网说明tempFilePaths 可以作为img 标签的src 属性显示图片<image src="{{imgUrl}}"></image><button bindtap="chosseImage">选择图片</button>chosseImage() { wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], source原创 2021-06-25 14:27:42 · 55 阅读 · 0 评论 -
小程序拨打电话APi
phone(){ console.log('ddd'); wx.makePhoneCall({ phoneNumber:'13409904743' }) },原创 2021-06-25 15:19:28 · 375 阅读 · 0 评论 -
小程序的路由 和 参数的传递
wx.switchTab只能跳转tabBar页面 并关闭其他非tabBar页面 异步wx.navigateTo和wx.redirectTowx.navigateTo用于跳转到页面内的某个页面 且保留当前页面 跳转页面后面 可以返回上一个页面(wx.navigateback) 可以返回到源页面wx.redirectTo:关闭当前页面 不能返回到上一个页面 只能跳转非标签页wx.reLaunch关闭所有页面 打开到应用内的某个页面 既能跳转到标签页 又能跳转到非标签页原创 2021-06-24 20:34:35 · 312 阅读 · 0 评论 -
小程序轮播图的自适应
小程序轮播图的自适应等比设置轮播图的高度即 屏幕宽度 / 屏幕高度 = 图片宽度 / 图片高度 获取当前屏幕的高度:// 方法 一、wx.getSystemInfoSync().windowWidth// 方法二、750rpx// 方法三、calc() 100vwwxml<swiper indicator-dots autoplay circular> <swiper-item> <image src="原创 2020-12-16 13:24:40 · 425 阅读 · 0 评论