微信小程序
关注
分享
扫一扫
小程序知识点记录
胡小牧
岁月推动着年华，伴随着流水的脚步走过春夏秋冬。回想一路走来磕磕绊绊，感谢前辈们的无私奉献，本文重在共享,欢迎大家转载,评论,收藏,点赞,谢谢,如果您对文章存在疑问，或者和您的文章类似，请私信，----------------期待是心痛的根源，心不动，则不痛。
展开
-
微信小程序data-xx 的使用
data-xx 的作用是在事件中可以获取这些自定义的节点数据，用于事件的逻辑处理比如 写一个list列表 想知道点击的list列表的那一个item ,比如获取点击的图片,等等使用data-xx 需要注意的 xx 是自己取的名字, 后面跟着的渲染一定要是使用的值,否则无效比如点击的是list 后面跟的是list的值,如果是图片后面就要是图片url的地址,一个demo不如现在要点击...原创 2019-06-14 16:40:54 · 13685 阅读 · 0 评论 -
微信小程序获取text的值与获取input的输入的值
有时候我们请求后台的时候需要使用到的1 获取text 的值首先需要把text 渲染 把值写在js里面不如 wxml 写一个text<view class="container log-list"> <text>{{ptxt}}</text></view>js里面获取Page({ /** * 页面的...原创 2019-06-14 15:14:26 · 9325 阅读 · 4 评论 -
微信小程序页面之间数据传递
微信小程序跳转界面传递数据,要传递的数据拼接在url 后面实现下面看一个简单的demo 传递数据要传递界面wxml<!--index.wxml--><view class="container"> <view class='name'> 姓名：<input placeholder='请输入姓名' value...原创 2019-06-14 14:43:16 · 960 阅读 · 0 评论 -
微信小程序 选中目标 在后面显示一个对号
先看下效果图这个实现有很多种 ,这里提供一种个人认为最简单的方法wxml代码如下 <view> <view class='list_item_maim' wx:for="{{city}}" wx:key="{{city}}" data-id="{{item.cityname}}" bindtap='click'> <v...原创 2019-06-05 16:09:30 · 3865 阅读 · 0 评论 -
微信小程序radio 标签 使用
记录radio 标签,主要是之前有一个项目 ui设计 选中的在后面刚开始以为需要自定义之类的后台自己随便弄了下,感觉只需要把文字放在前后即可radio 标签代码wxml<view><radio-group class="radio-group" bindchange="radioChange"> <label class...原创 2019-06-05 15:57:03 · 4441 阅读 · 3 评论 -
微信小程序文字两边添加横线
效果图实现代码方法1 简单点的wxml<view > <text class='reason_txt'>入网的理由</text></view>wxss .reason_txt{ font-size: 32rpx; color: #333333; display: table...原创 2019-06-04 17:22:44 · 8002 阅读 · 0 评论 -
微信小程序获取当前城市定位
获取当前城市 一般需要二步骤1getLocation 获取精度,维度2 然后请求,百度,高度,腾讯题图转换即可这里以百度地图为例代码如下wx.getLocation({ success: function(res) { console.log(res) var longitude = res.longitude var latit...原创 2019-06-04 16:34:21 · 3535 阅读 · 2 评论 -
微信小程序调用相机相册功能实现
这个其实很简单,微信提供了api1 一般我们做个人图像选择的时候可以简单的使用 click1:function(){ wx.chooseImage({ success: function(res) { }, }) },这样跳到的界面,就是带有图片库,库里面有一个相机可以点击拍照,2 如果要实现弹框相机,相册点击跳转到相应的...原创 2019-06-04 16:06:21 · 12143 阅读 · 1 评论 -
微信小程序修改整体背景颜色
微信小程序在最外层设置view 的高度为100% ，然后在设置backgroud 的颜色值发现没有效果 这个处理方法就是在xx.wxml 中设置page{background：#e5e5e5；}这样就能改变整体背景颜色的值了。...原创 2019-05-31 16:44:25 · 9520 阅读 · 0 评论 -
微信小程序一键创建js,json,wxml,wxss
在写小程序创建项目的时候每一个一般都会有js,json wxml ,wxss一个选择一个一个创建也可以一键创建创建的时候选择Component 输入名字 这四个就一下创建了这样创建写的时候js ,json里面不符合自己的修改下即可....原创 2019-05-31 09:47:49 · 2682 阅读 · 0 评论 -
怎样创建一个订阅号
由于公司要开发一个订阅号,自己整理了下相关信息这里分享给大家1 首先你需要有一个邮箱 ,然后打开微信公众平台微信公众平台地址打开之后点击注册会跳到界面2 选择订阅号点击订阅号会有一个提示,点击确定即可接下来会有四个步骤的填写信息点击注册之后就是选择类型了选择订阅号之后显示信息登录我选择了个人弹框提示之后就是...原创 2019-05-30 11:44:29 · 3538 阅读 · 0 评论 -
关于微信公众号注意事项
本文是自己曾经作为新手感觉迷惑的地方 ,这里记录一下如果想要做小程序或者公众号 需要到微信公众平台官方地址要注意的就是账号注册问题点击注册了会弹出界面加入我选择了小程序注册进入之后 显示这个只能开发小程序,不能开发 订阅号或者公众号加入现在想做一个自己的订阅号 需要 重新点击注册 ,然后选择 订阅号微信好像一个账号对应一个 ,,,,,...原创 2019-05-30 11:23:57 · 938 阅读 · 0 评论 -
微信公众号、订阅号、服务号区别
公众号是统称 里面包含订阅号,服务号,企业微信 ,其实就是订阅公众号和服务公众号服务号:是公众平台的一种帐号类型，旨在为用户提供服务1、1个月内仅可以发送4条群发消息2、发给订阅用户（粉丝）的消息，会显示在对方的聊天列表中。3、服务号会在订阅用户（粉丝）的通讯录中。4、服务号可申请自定义菜单。订阅号:是公众平台的一种帐号类型，为用户提供信息和资讯。...原创 2019-05-29 18:01:26 · 7220 阅读 · 0 评论 -
微信小程序自定义标题栏
微信小程序标题栏系统默认的有样式,有时候我们可能需要修改一下,看看下面的属性小程序可以全部自定义标题栏,7.0.0之后也可以单独修改某一个标题栏如果全部需要在app.json 的window里面添加"navigationStyle":"custom"如下 "window": { "backgroundTextStyle": "light", "navig...原创 2019-05-20 09:39:01 · 10460 阅读 · 0 评论 -
微信小程序修改标题
修改微信小程序的标题有2中方法1 是在json里面修改2 是在js里面修改一般app.json里面默认的如下 "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#00d8a0", "navigationBarTextStyle": "black", ...原创 2019-05-20 09:09:52 · 3909 阅读 · 0 评论 -
微信小程序左上角返回键返回指定界面
刚才是使用redirectTo 方法 /** * 生命周期函数--监听页面卸载 */ onUnload: function () { wx.redirectTo({ url: '../index/two/two',//指定界面 }) },但是这样出现一个问题 就是先返回瞬间返回点击跳转的界面在跳到指定界面,,,是不是感觉怪怪的,,,...原创 2019-05-15 17:46:36 · 12983 阅读 · 0 评论 -
微信小程序地图的实现
实现效果图不过我换是推荐看下官方文档,记得一定要看,很多属性要了解实现代码:wxml<view class="page-body"> <map id="map" style="width:100%; height:{{Height}}px" scale='16' latitude="{{latit...原创 2019-05-05 10:47:19 · 1417 阅读 · 7 评论 -
微信小程序cover-view 与cover-image
使用cover-view 与 cover-image 是实现覆盖在原生组件之上的文本视图。效果图效果图代码wxml<view class="page-body"> <map id="map" style="width:100%; height:{{Height}}px" scale='16' l...原创 2019-05-05 10:08:38 · 6743 阅读 · 0 评论 -
微信小程序地图上图片放到下面
效果图本来是写cover-view 与cover-image 的但是这3个图片弄了半天才弄好这里特意记录一下实现效果如下 display: flex; flex-direction: row; justify-content: space-between; height: 140rpx; position: fixed; bottom: 0; right...原创 2019-05-05 09:56:01 · 1965 阅读 · 0 评论 -
wx.getLocation 的使用
微信小程序获取当前地理位置使用wx.getLocation 方法，但是需要注意的使用这个别忘记申请权限需要在app.json 中添加permission ，如下 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效果展示" } }, "sitemapLocation...原创 2019-04-30 14:48:42 · 14420 阅读 · 0 评论 -
微信小程序快捷键
快捷键Mac OS 快捷键 Windows 快捷键 说明 ⌘ + Q 退出开发者工具 ⇧ + ⌘ + N shift + ctrl + N 新建项目 ⇧ + ⌘ + W shift + ctrl + W 关闭当前项目 文件 ⌘ + N ctrl + N 新建文件 ⌘ + S ctr...原创 2019-04-30 11:23:28 · 944 阅读 · 0 评论 -
微信小程序数据绑定
数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：内容<view>{{ message }}</view>Page({ data: { message: 'Hello MINA!' }})这个是我们常用的，当然换有其他的地方...原创 2019-04-30 11:02:42 · 268 阅读 · 0 评论 -
微信小程序界面跳转方法
1wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。使用方法:wx.navigateTo({ url: '路径'})2wx.reLaunch(Object object)关闭所有页面，打开到应用内...原创 2019-04-26 10:25:34 · 367 阅读 · 0 评论 -
微信小程序appid的修改方法
在程序的最下方有一个打开可以看到当然还有项目名字都可以修改...原创 2019-04-26 09:51:36 · 6431 阅读 · 2 评论 -
微信小程序分享注意点
模拟机如下图使用呢,文档上都有如下这个就是小程序分享如果想点击按钮分享也行,需要设置一下属性如下open-type="share"文档内容onShareAppMessage(Object object)监听用户点击页面内转发按钮（<button>组件open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。注...原创 2019-04-25 16:22:50 · 398 阅读 · 0 评论 -
微信小程序web-view使用
web-view 可以是微信小程序支持嵌套网页例如想 嵌套百度可以这样 <view > <web-view src="https://www.baidu.com/s?ie=UTF-8&wd=%E7%99%BE%E5%BA%A6"></web-view> </view>需要注意的是:承载网页的容器。会自动铺满整个...原创 2019-04-25 14:38:01 · 858 阅读 · 2 评论 -
微信小程序showModel使用注意
正确使用如下 wx.showModal({ title: '删除图片', content: '确定要删除该图片？', showCancel: true,//是否显示取消按钮 cancelText: "否",//默认是“取消” cancelColor: 'skyblue',//取消文字的颜色 confirmText: "是",//...原创 2019-04-25 11:23:25 · 3543 阅读 · 0 评论 -
微信小程序 require module exports 的使用
requireany require(string path)引入模块。返回模块通过module.exports或exports暴露的接口。项目中使用例如const { post } = require('../../utils/http.js')const util = require('../../utils/util')这个是2种不同的写法,...原创 2019-04-24 10:15:51 · 1960 阅读 · 0 评论 -
微信小程序设置字体上下左右居中
今天设置了text-align=center 只水平居中并没有垂直居中, 最后查阅了资料 添加一个line-height =80rpx 也就是设置自己的高度等于自己的设置的宽度即可原创 2019-04-24 09:55:35 · 11729 阅读 · 0 评论 -
微信小程序缓存
微信小程序缓存的方法如下文档上说在看例子:2中不同的方式,这个使用的时候要注意写一个demo加入我们想点击打印的时候获取缓存代码如下:click:function(){//同步方法console.log("==========", this.data.input_content)wx.setStorageSync("content1", th...原创 2019-04-22 13:33:42 · 466 阅读 · 0 评论 -
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法1 用系统自带的 个人感觉特别简单2 使用scroll-view 实现,scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实就是滑动到顶部和底部的时候请求网络,就行了,第一种方法说明:在json里面先声明这个界面要用到刷新{"enablePullDownRefresh": tr...原创 2019-04-19 18:30:44 · 1546 阅读 · 0 评论 -
微信小程序scroll-view的使用
这边博客主要是对微信小程序文档的的使用心得官网地址demo效果一些属性scroll-top 和属性,设置竖向滚动条的位置,就是第一次进来的时候,还没有滑动的时候view的位置假如不设置默认在第一位置,如果想显示中间的或者其他的位置,就可以使用此属性scroll-into-view 这个就是可以滚动到指定item的地方其他的属性就不用说了,这2个是自己...原创 2019-04-19 17:25:21 · 2774 阅读 · 0 评论 -
微信小程序获取验证码倒计时
实现效果图使用方法: setIntervaldemo:(如果对 setInterval不了解的可以先百度下)xml 中写一个按钮:<view class="container"><view class='countDown'><button style='color:red' disabled='{{isOk}}' bi...原创 2019-04-22 15:27:05 · 325 阅读 · 0 评论 -
微信小程序tabBar
实现效果图代码也很简单1 在项目的app.json 中配置 "tabBar": { "color": "#6e6d6b", "selectedColor": "#e64340", "borderStyle": "white", "backgroundColor": "#fff", "box-shadow": "0 0 6px 0...原创 2019-04-23 13:30:02 · 441 阅读 · 0 评论 -
微信小程序时间戳转化为时间
其实微信已经写好,那过来时间就行,在utils 里面本来就有const formatTime = date => { const year = date.getFullYear() const month = date.getMonth() + 1 const day = date.getDate() const hour = date.getHours() ...原创 2019-04-23 15:42:18 · 1659 阅读 · 0 评论 -
微信小程序顶部tab切换以及滑动
效果图图片如下实现代码xml中<view class="swiper_tab_view"> <scroll-view scroll-x='true' scroll-left="{{scrollleft}}" class='tab-h'> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ...原创 2019-04-23 14:41:22 · 3089 阅读 · 0 评论 -
appJSON["tabBar"][0]["pagePath"] "pages/basics/basics" 需在 pages 数组中
问题如下出现这个问题的原因自己创建了basics和media然后自己并没有在app.json 中pages没有声明路径所以呢在pages中添加路径即可,原创 2019-04-23 11:09:44 · 4177 阅读 · 0 评论 -
微信小程序轮播图实现
实现效果图这个我写了左右边距,不过要的话去掉即可代码也很少如下xml中<!--index.wxml--><view > <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration=...原创 2019-04-23 10:41:03 · 691 阅读 · 0 评论 -
微信小程序获取手机系统信息
使用方法有2种如下方法1wx.getSystemInfo 异步方法wx.getSystemInfo({ success(res) { console.log(res.model) console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windo...原创 2019-04-23 09:24:22 · 2283 阅读 · 0 评论 -
微信小程序bindtap 与 catchtap 是使用
如果写小程序对二者不理解的,那看到这边博客,将很快帮助到您,个人总结的一句话:,bindtap点击事件在同一个view中会向上冒泡,而catchtap 不会向上冒泡下面会有一个demo给出解释,说他们使用的时候先说下微信小程序的事件分类冒泡事件与非冒泡事件官网上这样规定的事件分类事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。...原创 2019-04-19 14:01:41 · 6048 阅读 · 0 评论