微信小程序
关注
分享
扫一扫
吴小傻0
这个作者很懒，什么都没留下…
展开
-
微信小程序--表格制作
–js–data:{ msg:'数据'}–wxml–<view class="container"> <view class="table"> <view class="tr"> <view class="th">标题1</view> <view class="t...转载 2019-04-04 09:50:09 · 899 阅读 · 0 评论 -
微信小程序-加载图片
在微信小程序中，要显示图片，有两种加载方式：1.加载本地图片2.加载网络图片加载本地图片–wxml–<image class="widget_arrow" src="/image/a.png" mode="aspectFill"></image>src="/image/a.png" 这句就是加载本地图片资源。加载网络图片–wxml–<imag...原创 2019-04-03 10:11:53 · 1561 阅读 · 0 评论 -
微信小程序-点击按钮，图片重新加载
在按钮绑定的响应方法里用setData给imageUrl设定新的地址即可reLoadImage:function(event){ console.log(event) var that = this; this.setData({ imageUrl:"http://img1.3lian.com/2015/w7/85/d/101.jpg" }) ...原创 2019-04-03 10:19:24 · 4179 阅读 · 0 评论 -
微信小程序-以post方式提交
微信小程序开发中网络请求必不可少.GET .POST请求是最常用的.GET请求，POST请求的时候有好几个坑.我已经为大家填好了.wx.request({ url: url, data: { teacherid: teacherid }, header: { 'content-type': 'application/...转载 2019-04-03 10:30:41 · 1658 阅读 · 0 评论 -
微信小程序-view水平垂直居中
–wxml–<view class='main'> <view>水平垂直居中</view></view>–wxss–.main { display: flex; align-items: center; justify-content: center; width: 100%; height: 300px;...原创 2019-04-03 10:47:05 · 1855 阅读 · 0 评论 -
微信小程序 获取用户信息接口调整
具体优化调整如下：1.获取用户头像昵称，第一次需要使用 button 组件授权，如果已经用组件授权了，wx.getUserInfo 可直接返回用户数据，无需重复授权弹窗。2. 如果没有用 button 组件授权，wx.getUserInfo 调用接口返回失败，提醒开发者需要先使用 button 组件授权。3. 用户可在设置中，取消授权。取消授权后需重新用 button 组件拉起授权。详细可...转载 2019-04-03 11:13:10 · 859 阅读 · 0 评论 -
微信小程序--view填充整个页面
在页面中我们要将某个元素填充整个页面，可以使用height:100%，前提是给定父元素的高度，在普通的html中可以将body或者html的高度赋值为height:100%，接下开才可以在其中的子元素使用height：100%来设置高度但是在微信小程序中根节点是page，所以我们需要对page赋值height：100%，再对其中的view赋值height：100%即可...转载 2019-04-03 11:21:05 · 4105 阅读 · 0 评论 -
微信小程序--view实现水平纵向布局
横向水平布局–wxss–.content{ display: flex; flex-direction: row; }其中display:flex将view设置为弹性布局，flex-direction: row设置布局的方向是横向水平布局。纵向垂直布局–wxss–.content{ display: flex; flex-direction: colum...原创 2019-04-03 11:31:11 · 7744 阅读 · 0 评论 -
微信小程序--用户头像做成圆形
–wxml–<view class="logo"> <open-data type="userAvatarUrl" class="userinfo" id="userinfo"></open-data></view>–wxss–#userinfo{ width: 185rpx; height:185rpx; border...原创 2019-04-03 11:37:25 · 1676 阅读 · 0 评论 -
微信小程序--登录页
–wxml–<!--pages/login/login.wxml--><view class='container'> <view class='header'> <text>学生评教系统</text> </view> <form bindsubmit="formSubmit"> &...转载 2019-04-03 11:42:58 · 505 阅读 · 0 评论 -
微信小程序--电话列表展示demo
–wxml–<view class="container list-container"> <view class="list-item" wx:for="{{contactList}}"> <image class="left" src="../../resources/headImg.jpg"></image> <...转载 2019-04-03 12:41:16 · 881 阅读 · 1 评论 -
微信小程序--下拉刷新与加载更多
下拉刷新实现下拉刷新有两种方式1.调用系统提供的下拉刷新的API2.监听scroll-view,自定义下拉刷新，适合自定义下拉刷新样式的小程序，以首页为例–home.json–"enablePullDownRefresh": true哪个页面需要下拉刷新，就在那个页面面对应的json文件配置上面这个属性，如果想整个项目都要用下拉刷新，可以在app.json的window里配置该属性。...转载 2019-04-04 09:41:28 · 3549 阅读 · 0 评论 -
小程序如何实现tab切换（1）
控制切换的tab<view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">做什么</view> <view class="swiper-tab-item ...原创 2019-05-25 09:08:53 · 562 阅读 · 0 评论 -
小程序如何实现tab切换（2）
–wxml–<import src="../../template/list.wxml"/> <view class="tui-tabbar-content"> <view class="tui-tabbar-group"> <text data-id="0" bindtap="changeTabbar" class="tui-tabbar-c...原创 2019-05-25 09:15:59 · 1900 阅读 · 0 评论 -
微信小程序中view标签与block标签的区别
两者的区别是， 是一个组件，会在页面上做渲染；不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。下面是两个使用的例子：wx:if<block wx:if="{{true}}"> <view> text </view> <view> text </view> </b...转载 2019-05-25 09:34:14 · 4009 阅读 · 0 评论 -
小程序请求超时errMsg : "request:fail socket time out timeout:60000"
小程序请求超时errMsg : “request:fail socket time out timeout:60000”在使用香港货境外服务器时很有可能遇到此问题。这个问题一般在PC端测试时看不出来，在真机测试或上线后会遇到，尤其当使用手机流量非wifi的时候。这个问题：表现有时浏览能失败、有时浏览正常。当一次请求失败，其他请求也会跟着失败。看看官方超时配置的默认值：请求、下载、上传、s...原创 2019-05-25 15:30:41 · 7710 阅读 · 0 评论 -
微信小程序--返回页面时重新加载
将数据加载部分放在onShow中进行原创 2019-04-04 15:53:13 · 9455 阅读 · 0 评论 -
微信小程序--自定义导航栏
1.在app.json的window对象中定义导航的样式："window":{ "navigationStyle": "custom"},2.现在app.json里定义globalData: { userInfo: null, navHeight: 0}在app.json的onLaunch方法里面获取手机状态栏高度，全局定义导航高度navHeight：// 获...转载 2019-04-04 15:36:41 · 1659 阅读 · 0 评论 -
微信小程序--侧边分类栏
效果图布局分析分成三个盒子：主盒子，左盒子，右盒子–wxml–<!--主盒子--><view class="container"> <!-- 左侧栏 --> <view class='nav_left'> <view class="nav_left_items {{curNav == 1 ? 'active' : ...转载 2019-04-04 09:57:38 · 5427 阅读 · 4 评论 -
微信小程序--底部导航栏
阿里图标库http://www.iconfont.cn/collections/show/29在app.json里添加配置文件 "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath...原创 2019-04-04 10:06:20 · 328 阅读 · 0 评论 -
微信小程序--view中后台拿到的文本数据不换行
从后台获取到的数据超出了设定的宽度，不能换行，要使用强制换行white-space:pre-line（不会保留空白和tabs）white-space:pre-wrap（会保留空白和tabs）只有文字的话，添加 word-break: break-all 样式就可以了...原创 2019-04-04 10:11:39 · 1141 阅读 · 1 评论 -
微信小程序--分割线
水平分割线–wxml–<view class="container"> <!-- 分割线 --> <view class="divLine"></view></view>–wxss–/*分割线样式*/.divLine{ background: #E0E3DA; width: 100%; height: 5...原创 2019-04-04 10:25:53 · 12626 阅读 · 2 评论 -
微信小程序--weui-wxss
WeUI概述WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含buttoncell、dialog、progress、toastarticle、actionsheet、icon等各式元素。WeUI的引入下载地址：weui.wxss注意：样式文件可直接引用dist/style/weui.wxss，或者单独引用d...转载 2019-04-04 10:41:19 · 678 阅读 · 0 评论 -
微信小程序--隐藏button边框
想使用button自带的disable属性和效果，但又不需要button显示边框线button控件有一条淡灰色的边框，在控件上了样式 border-radius: 0; 无法让button边框隐藏代码如下：.tx-btn { z-index: 99; position: fixed; left: 0; bottom: 0; width: 100%; height: 1...转载 2019-04-04 10:52:21 · 1751 阅读 · 0 评论 -
微信小程序--实现button点击改变数据值
–wxml–<button>default类型按钮</button><button>primary类型按钮</button><button>warn类型按钮</button>–js–Page({ data:{ // text:"这是一个页面" text:'' }, btn_...原创 2019-04-04 11:28:57 · 6021 阅读 · 0 评论 -
微信小程序--页面跳转法方法总结
方法一：js页面实现bindViewTab:function(){ wx.navigateTo({ //保留当前页面，跳转到应用内的某个页面（最多打开5个页面，之后按钮就没有响应的） url:"/pages/aaa/aaa" }) wx.redirectTo({ //关闭当前页面，跳转到应用内的某个页面 url:"/pa...原创 2019-04-04 11:41:31 · 207 阅读 · 0 评论 -
微信小程序--使用ECharts
ECharts 和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。体验示例小程序在微信中扫描下面的二维码即可体验 ECharts Demo：下载为了兼容小程序 Canvas，ECharts提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。首先，下载 GitHub 上的 e...转载 2019-04-04 14:18:55 · 1255 阅读 · 0 评论 -
微信小程序--获取pdf
给的接口中有两个字符串数组，数组里是pdf的地址如图实现过程代码：onLoad: function (options) { wx.request({ url: 'http://health.ia.ac.cn:5007/file/getFilesByListId?listId=13985', method: "POST", header: { "...原创 2019-04-04 14:31:37 · 2817 阅读 · 0 评论 -
微信小程序--表格制作
实现效果实现过程：–js– wx.request({ url: "http://health.ia.ac.cn:5007/checklistParameters/getChecklistParametersByListId?listId=13985", method: "POST", data: { }, header: { "Co...原创 2019-04-04 14:47:43 · 1460 阅读 · 0 评论 -
微信小程序--echarts实现双y轴
const App = getApp();import * as echarts from '../../ec-canvas/echarts'; //引入echarts.jsvar barec = nullPage({ onShareAppMessage: function (res) { return { title: 'ECharts 可以在微信小程序中使用啦！...原创 2019-04-04 15:00:16 · 1730 阅读 · 0 评论 -
微信小程序--获取form表单初始值提交数据
–wxml–<form bindsubmit="formSubmit"> <view class="txt"> <view class="ima"></view> <view class="txt2">姓名</view> <input placeholder="请输入姓名" ...转载 2019-04-04 15:03:00 · 2094 阅读 · 1 评论 -
微信小程序 - 表单验证插件WxValidate（自定义警告信息形式）
弹出的形式对于用户来说，总是不太友好的可能会出现层级问题（只需要设置一下提示的层级即可）微信小程序的开发框架个人感觉大体上跟VUE是差不多的，但是他的表单组件没有自带的验证功能，因此开发小程序的表单验证时候一般有两种方法，一是自己裸写验证规则，但是需要比较扎实的正则表达式基础，一种是利用官方社区开发的WxValidate插件进行表单验证。WxValidate插件是参考 jQuery Va...转载 2019-04-04 15:12:15 · 1349 阅读 · 0 评论 -
微信小程序中--使用ECharts实现多个图表展示
在一个页面显示多个图表–wxml–<view class='table_container'> <view class="container1"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec1 }}"></ec-canvas> </vi...原创 2019-04-04 15:24:12 · 10726 阅读 · 16 评论 -
微信小程序 数据获取及数据渲染
数据获取：注意：1.服务器要配置https2.配置合法域名3.在本地调试，在开发者工具勾选wx.request({ url: '接口地址', data: {}, success: function (res) {}, fail:function(err){}})数据渲染：–js–onLoad: function (options) { var th...原创 2019-05-25 15:36:38 · 4939 阅读 · 0 评论