项目需要,做一个和今日头条一样的导航栏,可以横行滚动,幸好再weui里面看到了类似的例子 地址:https://weui.shanliwawa.top/demo/js4.html,使用iscroll-lite.j实现,weui自己封装了一层,vue中实现代码: <div id="tab-tip" class="container"><div id="tagnav" class="weui-navigator weui-navigator-wrapper" style="touch-action: none;padding-left:5px"><ul class="weui-navigator-list first_nav"><li class v-for="grou...
使用扫小程序码登陆网站网络上关于实现本本功能的文章很多,但是给出案列的几乎没有,今天笔者实现用小程序码实现网站登陆,体验地址如下https://idea.techidea8.com/open/idea.shtml?id=5思路 核心流程关键流程建立场景sceneid和websocket的绑定关系获得sceneid场景ID可以前端生成,也可以后端生成,只需要保证sceneid的同一时间唯一性即可。前端生成可以采用随机数加时间戳的形式,也可以用uuid算法//时间戳 var sceneid ="scend-...
1.首先下载小程序开发工具 2.小程序中的wxml就相当于html , wxss就相当于css 3.布局和html布局几乎一样 4.宽度使用百分比 5.input框里的文字上下居中是用padding撑出来的 6.最下面的文字靠右,view相当于一个块元素,设定宽度后,text-align右对齐 简单的测试界面如图index.wxml代码 <!--index.wxml--> <view class="container"> <text class="indexTitle">添加邮箱账号</text> <view class="indexInput"><input maxlength="10" pl...
JS中的sender参数(sender是事件的传值)前提是只有一个touch移动的时候。多个touch需要在 changedTouches 数组中查找redclcik:function(sender){wx.showModal({title: 点击红色,content: ,})console.log(sender);},redmove:function(sender){console.log(sender);// console.log(sender.changedTouches[0].pageX);},.wxss内容: <view>移动视图控件</view> <!-- 创建一个move-area --> <movable-area style="width:100%;height:10...
一:npm初始化 如果你的小程序项目没有安装过npm包的话,你需要先初始化npm npm init二:安装npm包 这里以vant-weapp(小程序UI组件库)为例: npm i vant-weapp -S --production三:npm包构建 1:点击微信开发者工具右上角详情——>本地设置,选中使用npm模块2:点击微信开发者工具菜单栏的工具,选择构建npm当显示如下表示npm构建成功,构建完成就可以使用npm包了npm包构建完成之后项目的结构如下:四:使用npm 1:js中引入npm包 c...
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class。先上效果图:1.蒙层的结构: <!-- 购物车蒙层 --> <view class=list-fix wx:if="{{mengShow}}" bindtap=outbtn> //mengShow是蒙层是否显示的标志,然后蒙层绑定outbtn的点击事件<view class=in-list {{aniStyle?"slideup":"slidedown"}} catchtap=inbtn> //这里的三元运算符...
微信小程序图表插件(wx-charts)基于canvas绘制,体积小巧,支持图表类型饼图、线图、柱状图 、区域图等图表图形绘制,目前wx-charts是微信小程序图表插件中比较强大好使的一个 支持图标类型 饼图 pie圆环图 ring线图 line柱状图 column区域图 area雷达图 radar如何使用? 直接引用编译好的文件 dist/charts.js(js下载地址) .wxml中定义 <canvas canvas-id="lineCanvas" disable-scroll="true" class="canvas"></canvas> canvas...
你还在找在小程序成如何将图片转base64存储起来并显示嘛,在这里呢,来瞧瞧。 使用方法js文件 let $this = this; request({url:https://www.dounine.com/hello.jpg,method:GET,responseType: arraybuffer,success:function(res){let base64 = wx.arrayBufferToBase64(res);$this.data.userImageBase64 = data:image/jpg;base64, + base64;;} }); wxml文件 <image src={{userImageBase64}} style=width:90rpx;height:90rpx; /> PS:...
前言 在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,然而,分享出去的页面(也叫卡片),打开后只是一个单独的页面,没有底部导航栏,点击返回按钮的时候就直接退出小程序了。如果需要去到首页,还必须点击顶部胶囊的“回到首页”,可是该功能很少人知道。为了解决这个问题,有两种解决方案。第一种:在分享的页面在添加显眼的“首页”悬浮按钮,点击按钮跳转到首页。这种方法,好容易理解,可是万一页面多,需要开...
前言 微信小程序是数据驱动的应用,开发技术和vue、react和angular等mv*技术类似。在vue下可以用vue-resource、axios等模块进行http请求,但是在微信小程序上,http请求只支持wx.request(OBJECT),所以我们需要对wx.request进行封装,实现http拦截器的功能。第一步:创建一个request.js文件第二步:确定http、upload和websocket前缀第三步:封装wx.request在请求发出前处理http地址、请求头和参数、在响应后解析返回值并做基本的逻...
关键是 let that = this 因为在onLoad 的 wx.request方法里, this指的是 wx.request 的上下文, 所以应该是在 onLoad 的时候定义 let that = this 调用远程服务,序列化后,把obj赋值给bookList 最开始的报错代码如下: Page({data: {bookList: []},onLoad: function() {wx.request({url: https://jiashubing.cn/wechat/book,header: {content-type: application/json},success(res) {var obj = JSON.parse(res.data)console.log(...
最近在帮朋友写个小程序,本人小白一枚,但是好在计算机科班出身,有些概念一看还是明白的,只是之前没实际写过程序。于是最近看了好多资料和视频,不得不说,对于小白来讲,还是有点难度,但是不大。 通过最近看资料和别人的视频,总结一下: 1.页面布局,先画好。都是盒子,需要几个盒子,你就先画几个盒子。比如下面这个页面:红色盒子浅蓝盒子绿色盒子(这个绿色盒子里又可以切分成两个盒子:白色字体较大一个盒子,白色字体较...
先描述下目录结构,见下图UI页面见下图其中ok按键是引入的log模块,log模块非page页 indexButton是index页本身拥有的组件,index页直接导入Log模块中的组件,css,事件响应函数。 显示效果如下app.json的内容如下下面附上 index.js、index.wxml、index.wxss的代码下面附上 log.js、log.wxml、log.wxss的代码以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
效果js let app = getApp(); Page({data: {img: "/images/1.jpg"},onLoad() {},showShareMenu() {wx.showShareMenu();console.log("显示了当前页面的转发按钮");},hideShareMenu() {wx.hideShareMenu();console.log("隐藏了当前页面的转发按钮");},onShareAppMessage: (res) => {if (res.from === button) {console.log("来自页面内转发按钮");console.log(res.target);}else {console.log("来自右上角转发菜单")}return {title: 妹...
java后台相关问题一,程序包lombok不存在通常报这个错误,是因为,我们的开发者工具idea没有安装lombok库导致的 解决办法如下:提示我们没有安装,我们就安装一个不就行了,下面来教大家如何安装。1,点击扳手进入设置页2,点击plugins,然后搜索lombok,点击install即可安装3,安装完成后,重启idea开发工具即可二,无法执行sql文件,IDEA 2019.1连接数据库报错(08001)链接mysql数据库报如下错误08001 could not connection to da...