程序图片上传七牛

注册七牛云的账号, https://portal.qiniu.com/signup/choice获得ACCESS_KEY、SECRET_KEY  创建自己的存储空间,记录空间名(bucketname)、存储区域。  上传图片一、需要后端根据ACCESS_KEY、SECRET_KEY 在服务器生成一个upToken给到前端二、前端部分index.jsqiniuUploader文件地址:https://github.com/gpake/qiniu-wxapp-sdk/blob/master/demo/qiniu-demo/utils/qiniuUploader.jsconstqiniuUploader=require("../../utils/qiniuUploader");//index.js//初始化七牛相关参数functioninitQiniu(){varoptions={region:'NCN',//华北区uptokenURL:'https://[yourserver.com]/api/uptoken',//请求后端upt...

微信小程序中遮罩层的滚动穿透问题

 如果弹出层没有滚动事件:<viewwx:if="{{alert}}"catchtouchmove="myCatchTouch"><templateis="alert"data="{{alertData}}"/></view>myCatchTouch:function(){console.log('stopuserscrollit!');return;}, 如果弹出层有滚动事件,那么在弹出层出现的时候给底部的containerView加上一个class消失的时候移除。<viewclass="{{showModalView?'tripList_root':''}}">.tripList_root{top:0px;left:0px;width:100%;height:100%;overflow:hidden;position:fixed;z-index:0;} ...

CSS实现单行、多行文本溢出显示省略号(…)

如果实现单行文本的溢出显示省略号应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。实现方法:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;  但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。实现方法:display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;//第三行显示省略号overflow:hidden; ...

微信小程序开发思路

小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解整体结构默认示例项目的目录结构从后缀名上可以看到,一共有4种类型:js逻辑代码wxml视图文件wxss样式文件json配置信息/app.js中可以定义小程序在启动时做哪些业务逻辑、全局函数、全局数据……App({onLaunch:function(){...},getUserInfo:function(cb){...},globalData:{userInfo:null}}) /app.json中进行小程序全局性的配置,例如底部导航有哪些标签、共有哪些页面、头部title、背景色……{"pages":["pages/index/index",...],"window":{"navigationBarTitleText":"WeChat",...},"tabBar":{"list":[{"pagePath":"pages/index/index","text":"首页"}...

小程序七:组件之表单组件

button按钮组件。属性名类型默认值说明sizeStringdefault有效值default,minitypeStringdefault按钮的样式类型,有效值primary,default,warnplainBooleanfalse按钮是否镂空,背景色透明disabledBooleanfalse是否禁用loadingBooleanfalse名称前是否带loading图标formTypeString无有效值:submit,reset,用于form组件,点击分别会触发submit/reset事件hover-classStringbutton-hover指定按钮按下去的样式类。当hover-class="none"时,没有点击态效果注:button-hover默认为{opacity:0.7;}示例代码:index.wxss:/**wxss**//**修改button默认的点击态样式类**/.button-hover{background-color:red;}/**添加自定义button点击态样式类**/.other-button-hover{background-color:blur;...
IT猿 IT猿·2020-03-27

程序十一:网络请求

wx.request(OBJECT)​wx.request发起的是https请求。一个微信小程序,同时只能有5个网络请求连接。OBJECT参数说明:参数名类型必填说明urlString是开发者服务器接口地址dataObject、String否请求的参数headerObject否设置请求的header,header中不能设置ReferermethodString否默认为GET,有效值:OPTIONS,GET,HEAD,POST,PUT,DELETE,TRACE,CONNECTsuccessFunction否收到开发者服务成功返回的回调函数,res={data:"开发者服务器返回的内容"}failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)示例代码:[javascript]viewplaincopy wx.request({    url: 'https://www.ceshi.com/test.php',    ...

程序十:媒体组件

audio属性名类型默认值说明actionObject 控制音频的播放、暂停,播放速率、播放进度的对象,有method和data两个参数srcString 要播放音频的资源地址loopBooleanfalse是否循环播放controlsBooleantrue是否显示默认控件posterString 默认控件上的音频封面的图片资源地址,如果controls属性值为false则设置poster无效nameString未知音频默认控件上的音频名字,如果controls属性值为false则设置name无效authorString未知作者默认控件上的作者名字,如果controls属性值为false则设置author无效binderrorEventHandle 当发生错误时触发error事件,detail={errMsg:MediaError.code}bindplayEventHandle 当开始/继续播放时触发play事件bindpauseEventHandle 当暂停播放时触发pause事件bindratechangeEventHa...
IT猿 IT猿·2020-03-27

程序九:导航&地图&画布

navigator导航属性名类型默认值说明urlString 应用内的跳转链接redirectBooleanfalse是否关闭当前页面hover-classStringnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果注:navigator-hover默认为{opacity:0.7;},<navigator/>的子节点背景色应为透明色示例代码:index.wxss:/**修改默认的navigator点击态**/.navigator-hover{color:blue;}/**自定义其他点击态样式类**/.other-navigator-hover{color:red;}index.wxml:<viewclass="btn-area"><navigatorurl="navigate?title=navigate"hover-class="navigator-hover">跳转到新页面</navigator><navigatorurl="redirect?title=red...

程序八:操作反馈

action1、action-sheet从屏幕底部出现的菜单表。属性名类型默认值说明hiddenBooleantrue是否隐藏bindchangeEventHandle 点击背景或action-sheet-cancel按钮时触发change事件,不携带数据2、action-sheet-item底部菜单表的子选项。3、action-sheet-cancel底部菜单表的取消按钮,和action-sheet-item的区别是,点击它会触发action-sheet的change事件,并且外观上会同它上面的内容间隔开来。示例代码:index.wxml:<buttontype="default"bindtap="actionSheetTap">弹出actionsheet</button><action-sheethidden="{{actionSheetHidden}}"bindchange="actionSheetChange"><blockwx:for-items="{{actionSheetItems}}"><action-sh...
IT猿 IT猿·2020-03-27

程序六:组件之基础内容

icon图标。属性名类型默认值说明typeString icon的类型,有效值:success,success_no_circle,info,warn,waiting,cancel,download,search,clearsizeNumber23icon的大小,单位pxcolorColor icon的颜色,同css的colortext文本节点,支持转义符""。除了文本节点以外的其他节点都无法长按选中示例:<viewclass="sectionsection_gap"><text>{{text}}</text><viewclass="btn-area"><buttonbindtap="add">addline</button><buttonbindtap="remove">removeline</button></view></view>varinitData='thisisfirstlinethisissecondline'Page({data:...

程序五:组件之视图容器

view视图容器。示例:<viewclass="section"><viewclass="section__title">flex-direction:row</view><viewclass="flex-wrp"style="flex-direction:row;"><viewclass="flex-itembc_green">1</view><viewclass="flex-itembc_red">2</view><viewclass="flex-itembc_blue">3</view></view></view>列式排放:flex-direction:row;行式排放:flex-direction:column;scroll-view可滚动视图区域。属性名类型默认值说明scroll-xBooleanfalse允许横向滚动scroll-yBooleanfalse允许纵向滚动upper-thresholdNumber50距顶部/左边多远时(...

程序四:视图之WXSS

WXSS(WeiXinStyleSheets)是MINA设计的一套样式语言,用于描述WXML的组件样式。WXSS用来决定WXML的组件应该怎么显示。为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性。同时为了更适合开发微信小程序,我们对CSS进行了扩充以及修改。与css相比我们扩展的特性有:尺寸单位样式导入尺寸单位rpx(responsivepixel):可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在iPhone6上,屏幕宽度为375px,共有750个物理像素,则750rpx=375px=750物理像素,1rpx=0.5px=1物理像素。设备rpx换算px(屏幕宽度/750)px换算rpx(750/屏幕宽度)iPhone51rpx=0.42px1px=2.34rpxiPhone61rpx=0.5px1px=2rpxiPhone6s1rpx=0.552px1px=1.81rpxrem(rootem):规定屏幕宽度为20rem;1rem=(750/20)rpx。建议:开发微信小程序时设计师可以用iPhone6作为视觉稿的标准。样式导入使用@import语句可以导入外联...
IT猿 IT猿·2020-03-27

程序三:视图层之WXML

WXMLWXML(WeiXinMarkupLanguage)是MINA设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。【1】数据绑定1.1简单绑定数据绑定使用"Mustache"语法(双大括号)将变量包起来,可以作用于:<view>{{message}}</view>Page({data:{message:'HelloMINA!'}}) 1.2组件属性(需要在双引号之内)<viewid="item-{{id}}"></view>Page({data:{id:0}}) 1.3控制属性(需要在双引号之内)<viewwx:if="{{condition}}"></view>Page({data:{condition:true}}) 1.4运算可以在{{}}内进行简单的运算,支持的有如下几种方式:1.4.1三元运算<viewhidden="{{flag?true:false}}">Hidden</view>1.4.2算数运算<view>{{...

程序二:逻辑层

App()App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。object参数说明:属性类型描述触发时机onLaunchFunction生命周期函数--监听小程序初始化当小程序初始化完成时,会触发onLaunch(全局只触发一次)onShowFunction生命周期函数--监听小程序显示当小程序启动,或从后台进入前台显示,会触发onShowonHideFunction生命周期函数--监听小程序隐藏当小程序从前台进入后台,会触发onHide其他Any开发者可以添加任意的函数或数据到Object参数中,用this可以访问 前台、后台定义: 当用户点击左上角关闭,或者按了设备Home键离开微信,小程序并没有正在的销毁,而是进入了后台;当再次启动微信或再次打开小程序,又会从后台进入前台。只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。//app.jsApp({onLaunch:function(){//调用API从本地缓存中获取数据varlogs=wx.getStorageSync('logs')||[]logs....
IT猿 IT猿·2020-03-27

程序一:小程序的框架

MINAMINA(MINAISNOTAPP)是在微信中开发小程序的框架。MINA的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生APP体验的服务。MINA提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。文件结构框架程序包含一个描述整体程序的app和多个描述各自页面的page。一个框架程序主体部分由三个文件组成,必须放在项目的根目录,如下:文件必填作用app.js是小程序逻辑app.json是小程序公共设置app.wxss否小程序公共样式表一个框架页面由四个文件组成,分别是:文件类型必填作用js是页面逻辑wxml是页面结构wxss否页面样式表json否页面配置配置我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。以下是一个包含了所有配置选项的简单配置app.json :{"pages":["pages/wechat/wechat","pages/note/note"...
IT猿 IT猿·2020-03-27
首页上一页...297298299300301...下一页尾页