微信小程序
文章平均质量分 74
微信小程序
richest_qi
这个作者很懒,什么都没留下…
展开
-
小程序实现查询天气功能
高德开放平台注册成为开发者高德开放平台提供的天气查询能力详见天气查询API文档。申请key应用管理>我的应用,创建新应用应用名称:weather_app(自定义)应用类型:选择“天气”创建完应用后,在应用下添加KeyKey名称:weather_query(自定义)服务平台:选择“Web服务”IP白名单:可不填写设置安全通信域名为了保证天气查询接口在小程序中能正常调用,需要设置安全域名。登录微信公众号,开发>开发管理>开发设置,服务器域名中配置reque原创 2021-07-29 22:10:18 · 496 阅读 · 0 评论 -
小程序之常用API
文章目录wx.chooseImage()wx.chooseAddress()wx.makePhoneCall()wx.chooseImage()从本地相册选择图片或使用相机拍照。部分配置参数如下:count,最多可以选择的图片张数,是一个数值,默认值是9。sizeType,所选图片的尺寸,是一个数组,默认值是['original','compressed']。original,使用原图compressed,使用压缩图sourceType,选择图片的来源,是一个数组,默认值是['alb原创 2021-07-14 21:08:12 · 397 阅读 · 1 评论 -
小程序之页面跳转
文章目录wx.getSettingwx.getSetting获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。看个小例子。<!--index.wxml--><button bindtap="getSetting">查看授权结果</button>// index.jsPage({ getSetting:function(){ wx.getSetting({ success:(res) => { co原创 2021-07-14 16:59:07 · 476 阅读 · 0 评论 -
【微信小程序】获取用户信息
文章目录组件open-databutton组件中的open-type获取用户信息组件open-data组件 open-data用于展示微信开放的数据。所谓“开放”的数据,就是不需要用户授权就可以显示的数据,如用户的头像、昵称、性别等。type,开放数据的类型,有如下合法值,groupNameuserNickName,用户昵称userAvatarUrl,用户头像userGender,用户性别userCity,用户所在城市userProvince,用户所在省份userCountry,用户原创 2021-07-08 21:35:05 · 5274 阅读 · 0 评论 -
微信小程序的下拉刷新和上拉触底
页面逻辑onLoad(options)页面逻辑里,onLoad函数接收一个参数options,其中包含了当前页面路径的参数。看个例子吧。// pages/index/index.jsPage({ onReady:function(){ wx.navigateTo({ url: '/pages/test/test?name1=value1&name2=value2', }) }})// pages/test/test.jsPage({ onLo原创 2021-07-08 17:08:37 · 623 阅读 · 0 评论 -
【微信小程序】用户登录
文章目录小程序客户端代码express服务端代码前后端代码调试小程序客户端代码// app.jsApp({ onLaunch:function(){ this.login(); }, login:function(){ wx.login({ success: res => { console.log("登录凭证code:",res.code); wx.request({ url:"http://local原创 2021-07-06 22:05:42 · 392 阅读 · 1 评论 -
微信小程序的表单组件与表单验证
文章目录form组件input组件button组件picker组件wx.showToast(Object object)实例form组件当点击form表单中form-type为submit的button组件时,会将表单组件中的value值进行提交,需要在表单组件中加上name类作为key。bindsubmit,携带form中的数据触发submit事件input组件placeholder,输入框为空时占位符placeholder-class,指定placeholder的样式bindblur原创 2021-07-04 17:55:34 · 932 阅读 · 0 评论 -
使用微信小程序的picker组件
简单示例<!-- index.html --><picker mode="selector" range="{{array}}" value="{{index}}" bindchange="pickerChange"> <view>当前选择:<text>{{array[index]}}</text></view></picker>/**index.wxss**/view{ margin: 100rpx;原创 2021-07-01 21:51:12 · 2759 阅读 · 0 评论 -
使用微信小程序的map组件
简单示例拾取目标地点的经纬度到腾讯位置服务网站上获取 北京石景山区万达广场云海肴 的经纬度。目标地址的纬度(latitude)为39.905791,经度(longitude)为116.225669。使用map组件<!--pages/test/test.wxml--><map latitude="39.905791" longitude="116.225669" ></map>调用微信内置地图和定位首先,获得 用户授权,只有用户同意授权,后面才可原创 2021-06-30 22:12:09 · 953 阅读 · 0 评论 -
微信小程序的wxs模块
<wxs module="formatTime"> module.exports = function(timestamp){ var date = getDate(timestamp); var y = date.getFullYear(); var m = date.getMonth()+1; var d = date.getDate(); var h = date.getHours(); var m = date.getMinutes()原创 2021-06-30 21:00:00 · 444 阅读 · 0 评论 -
使用微信小程序的video组件
先来个简单的,<!--index.wxml--><video src="https://ugcbsy.qq.com/uwMROfz2r5xiIaQXGdGlQmdfJ7yHzHEsPXDor1Y5RH80k33k/v1413ivib4x.p712.1.mp4?sdtfrom=v1010&guid=9d9aa4fafb2dc32699076eb845f8fad8&vkey=7DFEE07A98C927034264801C10141717266BE5A521E3DC3491原创 2021-06-28 22:31:06 · 11009 阅读 · 1 评论 -
swiper实现图片轮播
<!--index.wxml--><swiper autoplay vertical circular indicator-dots indicator-color="#fff" indicator-active-color="#888" interval="3500" duration="1000"> <swiper-item wx:for="{{imgUrls}}" wx:k="*this"> <image src="{{item原创 2021-06-22 21:36:42 · 500 阅读 · 0 评论 -
解决小程序中本地资源图片无法通过wxss获取的问题
小程序之本地资源图片无法通过wxss获取原创 2021-06-21 23:08:29 · 183279 阅读 · 5 评论 -
BackgroundAudioManager实现背景音乐
文章目录搭建音频服务器小试一下参考文章本例中的背景音乐,在小程序切至后台时,如果音频处于播放状态,可以继续播放。在小程序全局配置app.json中,有一项属性:requiredBackgroundModes,用于声明 需要后台运行的能力,比如requiredBackgroundModes:["audio","location"],即需要后台播放音乐、需要后台定位。要实现背景音频,小程序提供了BackgroundAudioManager实例,该实例可以通过wx.getBackgroundAudioMan原创 2021-06-16 21:48:06 · 2085 阅读 · 0 评论 -
微信小程序实现一个小型计算器
app.js// app.jsApp({ onLaunch() { }, REGEXP:/^[\+\-×÷]$/})app.wxss/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-siz.原创 2021-06-16 12:21:29 · 914 阅读 · 0 评论 -
InnerAudioContext实现音乐播放器
音乐播放器的功能是通过调用微信小程序的wx.createInnerAudioContext()接口获取对象ctx,然后利用ctx对象的属性和方法来实现音乐控制。本例会涉及到ctx对象的如下属性、方法,更多可以访问这里。src,音频资源的地址。值得注意的是,src目前仅支持根路径,不支持相对路径。如果使用相对路径,会导致音频无法播放,同类问题可参见这里。这也是为什么本例会基于express搭建一个小型服务器。volume,音量,范围0~1,默认是1。duration,当前音频的长度,单位是秒。c原创 2021-06-16 11:31:44 · 1947 阅读 · 0 评论 -
小程序组件button的样式问题
使用微信开发者工具创建小程序项目,其中使用到了小程序组件button,如下所示,<view> <text>请输入第1个数字:</text> <input text="number"/></view><view> <text>请输入第2个数字:</text> <input type="number"/></view><button>比较</butt原创 2021-05-24 21:46:28 · 852 阅读 · 0 评论 -
【小程序】多端框架Taro实现外卖首页
文章目录全局安装Taro命令行工具创建模板项目安装其他第三方依赖代码目录详细代码修改index.jsx新增目录 assets/images新增commons/utils/utils.js新增目录components/bottombottom.jsxbottom.scss新增目录components/foodcategory.jsxcategory.scssfood.jsxfood.scssfoodlist.jsxfoodlist.scssoperation.jsxoperation.scss新增目录comp原创 2021-01-11 21:01:03 · 800 阅读 · 0 评论 -
【Taro】Taro中jsx文件引入本地图片资源的方式
文章目录新建项目改造项目:jsx中引入本地图片资源遇到问题:Taro无法使用相对路径引用本地图片解决问题方式1:使用require()方式2:使用import新建项目taro init myProject,创建模板项目npm run dev:weapp,编译将编译生成的dist目录导入微信开发者工具改造项目:jsx中引入本地图片资源接下来,我们来改造下这个简单的demo,依次做这两件事:第一件:在src目录下新建文件夹assets,继续新建子文件夹images,将准备好的四张图片放入i原创 2020-12-18 21:14:46 · 3916 阅读 · 1 评论 -
【微信小程序云开发】豆瓣最新电影demo
文章目录代码目录详细代码pages/moviepages/commentpages/profile效果代码目录详细代码//app.jsApp({ onLaunch: function () { if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力') } else { wx.cloud.init({ // env 参数说明: // env 参数决定接下来小程序发原创 2020-12-10 22:04:41 · 1453 阅读 · 1 评论 -
【微信小程序】第三方UI组件库vant weapp入门
鼠标移动至目录miniprogram上,单击鼠标右键,点击“在外部终端窗口中打开”,打开命令窗口在命令窗口中执行命令: npm init -y,创建package.json文件npm i @vant/weapp -S --production,安装vant weappnpm i 同 npm install-S 同 --save-D 同 --save-dev工具>构建npm,miniprogram下新增子目录miniprogram_npm遇到如下报错:[ minipr..原创 2020-12-02 10:30:00 · 675 阅读 · 0 评论 -
【微信小程序】云开发入门
微信小程序云开发原创 2020-12-01 20:10:25 · 642 阅读 · 0 评论 -
【微信小程序】知乎小demo
app.jsonpages是一个数组,定义了小程序页面所在文件路径。数组的第一个元素就是微信小程序的首页。文件名不需要写后缀,框架会自动去寻找对应位置的.json、.js、.wxml和.wxss文件进行处理。window设置小程序的状态栏、导航条、标题、窗口背景色。backgroundTextStyle下拉加载时的样式,仅支持light|dark这两个值,默认是dark。navigationBarBackgroundColor导航栏的背景色navigationBarTitleTe.原创 2020-11-20 12:34:44 · 1987 阅读 · 0 评论 -
【微信小程序】文本的展开与收起
文章目录详细代码相关说明参考文章详细代码app.json的内容如下{ "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#07c160", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"white" },原创 2020-11-18 11:00:26 · 1791 阅读 · 1 评论 -
【微信小程序】实现搜索框
app.json{ "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#16C4AF", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"white" }, "style": "v2", "sitemap原创 2020-11-13 15:06:50 · 11416 阅读 · 2 评论 -
【小程序】初识Taro
Taro架构主要分为:编译时和运行时。编译时将Taro代码经Babel转换成小程序代码,如.wxml、.wxss、.js和.json。运行时生命周期、事件、data等部分的处理和对接。原创 2020-11-11 08:43:42 · 408 阅读 · 0 评论 -
【微信小程序】移动开发的一些概念
.wxml、.wxss工作在渲染层,.js工作在逻辑层。小程序基于双线程模型,渲染层由WebView线程管理,逻辑层由JsCore线程管理。原生渲染web渲染PC端PC端安装浏览器,浏览器承载服务。在浏览器中打开搜索引擎,在搜索栏中输入关键字,然后跳到服务页面,整个过程非常流畅。移动端移动端安装浏览器,浏览器承载服务首先,移动端承载的服务远比PC端复杂,比如拍照、定位、蓝牙、传感器等,这些功能在网页端没有相应的API可供调用,让网页去承载移动端的这些服务,服务势必不完整。另外,移动端原创 2020-11-09 09:41:13 · 316 阅读 · 0 评论 -
【微信小程序】本地数据缓存
文章目录读写本地数据缓存利用本地缓存提前渲染页面代码目录详细代码前台后台利用本地缓存持久化SessionId读写本地数据缓存wx.setStorage()wx.getStorage()wx.setStorageSync()wx.getStorageSync()<!-- index.wxml --><view class="container"> <text>hello world</text></view>/* in原创 2020-11-04 15:14:06 · 2126 阅读 · 0 评论 -
【微信小程序】微信登录
文章目录目录结构小程序前台从微信服务器获取微信凭证登录code小程序前台向小程序后台发送微信登录凭证code小程序后台发送微信登录凭证code给微信服务器目录结构小程序前台从微信服务器获取微信凭证登录code小程序调用wx.login()获得一张微信登录凭证,这张凭证是有时效性的,有效时间是5分钟。<!-- index.wxml --><view> <button bind:tap="handleLogin">Login</button>原创 2020-11-04 09:58:44 · 307 阅读 · 0 评论 -
【微信小程序】小程序与服务端的http通信
文章目录搭建服务端小程序小程序与服务端通信get请求小程序向服务端发送数据服务端接收小程序发送过来的数据post请求小程序向服务端发送数据服务端接收小程序发送过来的数据请求前后的状态处理搭建服务端npm install -save-dev express// server.jsconst express = require("express");const server = express();server.use("/test",function(req,res){ const o原创 2020-11-03 14:37:12 · 6401 阅读 · 3 评论 -
【微信小程序】常见界面交互
触摸反馈<!-- index.wxml --><button hover-class="hover" loading="{{isLoading}}" bind:tap="handleClick">click me</button>/* index.wxss */.hover{ background-color: lightgoldenrodyellow;}// index.jsPage({ data:{原创 2020-11-02 16:54:26 · 2115 阅读 · 0 评论 -
【微信小程序】Flex布局
flex-directionrow默认值,默认水平轴是主轴,垂直轴是交叉轴。column此时,垂直轴是主轴,水平轴是交叉轴。justify-content决定如何分配主轴的剩余空间align-content决定如何分配交叉轴的剩余空间align-items决定Flex项在交叉轴上的对齐方式...原创 2020-11-02 13:26:00 · 1250 阅读 · 0 评论 -
【微信小程序】开发入门(下)
Helloworld<!-- index.wxml --><view>{{msg}}</view>//index.jsPage({ onLoad:function(){ this.setData({ msg:"hello world" }) }})wxml、wxss工作在渲染层,js工作在逻辑层。渲染层由WebView线程管理,逻辑层由JsCore线程管理,两个线程之间的通信经由微信原创 2020-10-30 15:17:33 · 364 阅读 · 0 评论 -
【微信小程序】javascript
ECMAScript是标准,JavaScript是ECMAScript的实现。JavaScript组成部分说明浏览器中的JavaScriptECMAScript+DOM+BOM小程序的JavaScript没有DOM对象没有BOM对象所以Jquery等浏览器类库无法在小程序中运行NodeJs中的JavaScriptECMAScript+NPM+Native小程序的JavaScript没有NPM没有Native所以一些npm包无法在小程序中运行微信小程序的JavaSc原创 2020-10-27 15:02:42 · 1231 阅读 · 0 评论 -
【微信小程序】wxss样式
rpxrpx(responsive pixel)是wxss新引进的尺寸单位。在宽度为375物理像素的屏幕下,1rpx=1px;iphone6的屏幕宽度是750物理像素,375px,此时1rpx = 0.5px。<!-- index.wxml --><view>hello world</view>/* index.wxss */page{ display: flex; justify-content: center; align-it原创 2020-10-26 20:35:21 · 342 阅读 · 0 评论 -
【微信小程序】wxml模板
数据绑定<!-- index.wxml --><view > <text >hello,</text> <text data-title="{{title}}">{{name}}</text> <view >{{"welcome " + name}}</view></view>// index.jsPage({ data:{ name:"Ni原创 2020-10-23 10:47:35 · 848 阅读 · 0 评论 -
【微信小程序】开发入门(上)
文章目录代码结构详细代码app.jsonproject.config.jsapp.jspages/index.wxmlpages/index.js效果小程序调试代码结构详细代码app.json微信小程序的全局配置。pages是一个数组,定义了 小程序页面所在文件路径。数组的第一个元素 就是 微信小程序的首页。windows定义了 全局的默认的窗口表现,包括导航栏的背景色、文本内容、文本颜色等。{ "pages":[ "pages/index" ], "windo原创 2020-10-21 22:11:00 · 604 阅读 · 0 评论