您的位置:一分快三全天精准计划 > 1分快3全天计划官方网站-编程 > 反正本猿被刷屏了

反正本猿被刷屏了

2019-09-09 16:51

图片 1DEMO效果图1

这周,你被微信小程序刷屏了呢? 反正本猿被刷屏了~~~~本猿最初看出微信小程序相关的小说,应该是冯大辉先生的「微信公众号来了」, 据MAC君揭穿,那篇文章寥寥几百字,一天内阅读量过百万。。。那是要全猿开垦微信小程序的音频撒!!本猿表示绝对不可以能落伍,于是趁机星期天,起始微信小程序支付之旅!各位猿们,上车咯~

图片 2效果图

一言不合就上效果图哈,辣那么些demo是肿么做出来的呢?莫急莫急,且听本猿渐渐道来哈~

付出微信小程序,首先确定是搭建情状啦,你可以选择依照github上的这一个repo实行下载安装,也得以下载那个压缩包,火速到位安装哈,这一个安装包里有如下文件:

图片 3压缩包

接下去的步调是:(Update: 已经不用做上面那八个步骤啦,直接进repo链接下载最新的9.0版,直接设置哈)

  • 安装wechat_web_devtools_0.7.0_x64,并用它跟手提式有线电话机微信落成登入

  • 蒙面安装wechat_web_devtools_0.9.092100_x64

  • 将weapp-ide-crack-master文件夹中的八个公文,放到安装程序目录对应的地点:

  • 微信web开荒者工具package.nwappdistcomponentscreatereatestep.js

  • 微信web开荒者工具package.nwappdiststroesprojectStores.js

  • 微信web开辟者工具package.nwappdistweappappserviceasdebug.js

图片 4

做完上述手续,就能够愉悦的展开微信的IDE啦~

图片 5

接下去,就是程序猿的老规矩:helloworld!

图片 6

开创项目,填好不毫无干系系input选项,点击增加项目,搞定!

图片 7

太简单?没有错,正是那样轻巧,哈哈,假设要复杂点,用IDE打开本猿提供的压缩包中的webapp-demo。

图片 8

它提供了颇具组件和API的应用模范,如下图:

图片 9

相信玩过react native的童鞋一定会以为似曾相识,没有错,这几个DEMO就像react native官方提供的UIExplorer同样哈!通过那一个demo,大家就足以照着做一个DEMO啦。

搭完情形,就足以快乐的码代码了,大家先来看下刚新建项目标代码结构:

图片 10代码结构

大家先关心根目录下最要紧的八个文件:

图片 11

app.js大家有的时候无需改,首先配置好app.json,要点如下:

  • 将您要确立的page路线加到pages配置项上
  • 布置window配置项上的标题栏颜色 / 风格 / 内容等
  • 配置tabbar配置项上的内容 / icon等
  • 设置debug配置项,方便打log
{ "pages":[ "pages/index/index", "pages/index/view/info-list", "pages/index/view/info-detail", "pages/logs/logs", ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#4DBBFF", "navigationBarTitleText": "微信VR视频资源推荐", "navigationBarTextStyle":"white" }, "tabBar": { "color": "#dddddd", "selectedColor": "#4DBBFF", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/index/index", "iconPath": "image/wechat.png", "selectedIconPath": "image/wechatHL_blue.png", "text": "首页" }, { "pagePath": "pages/index/view/info-list", "iconPath": "image/wechat.png", "selectedIconPath": "image/wechatHL_blue.png", "text": "VR列表" }] }, "networkTimeout": { "request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000 }, "debug": true}

关于app.wxss, 要是多少个页面中的样式有重复,须求复用,能够在app.wxss上写哈~~

接下去就写页面啦,通过app.json,大家能够见见,笔者总共就多个page而已哈(其余八个自带的,log记录等等的,忽略)

图片 12

作者们先来询问下page的生命周期回调函数:

命令 描述
onLoad 生命周期函数--监听页面加载
onReady 生命周期函数--监听页面渲染完成
onShow 生命周期函数--监听页面显示
onHide 生命周期函数--监听页面隐藏
onUnload 生命周期函数--监听页面卸载

在写那三个page时,首要选拔了多少个零件,第叁个是swiper,也正是滑动面板,代码如下:

//index.wxml<!--Swiper--><view > <swiper style="height: 200px;" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for-items="{{swiper_list.data}}"> <swiper-item> <navigator url="view/info-detail?title={{item.article.title}}&id={{item.article._id}}&req_type=swiper" hover-> <text >{{item.article.title}}</text> <image src="{{item.article.cover}}"></image> </navigator> </swiper-item> </block> </swiper></view>i//index.jsget_vr_swiper_info: function() { console.log('get_vr_info') var swiper_offset = parseInt( 800 * Math.random; var that = this wx.request({ url: API_URL + swiper_offset, success: function { that.setData({ swiper_list: response.data.result }) } });}

第贰个是可滚动视图scrollview,代码如下

//index.wxml<scroll-view scroll-y="true" style="height: 400px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}"> <block wx:for-items="{{vr_list.data}}"> <navigator url="view/info-detail?title={{item.article.title}}&id={{item.article._id}}&req_type=vr_list" hover-> <view > <view bindtap="widgetsToggle"> <text >{{item.article.title}}</text> <image src="resources/kind/form.png" background-size="cover" /> </view> <image src="{{item.article.cover}}" /> </view> </navigator> </block></scroll-view>//index.jsupper: function { console.log},lower: function { console.log},scroll: function { console.log},scrollToTop: function { this.setAction({ scrollTop: 0 })},tap: function { for (var i = 0; i < order.length; ++i) { if (order[i] === this.data.toView) { this.setData({ toView: order[i + 1], scrollTop:  * 200 }) break } }},tapMove: function { this.setData({ scrollTop: this.data.scrollTop + 10 })},

其多少个是navigator,肩负页面间的跳转,代码上边其实也可能有了,主要正是宣称好标签,并写上url路径就行啊。

<navigator url="view/info-detail?id={{item.article._id}}"></navigator>

除此以外还亟需通晓四个基本点接口:

  • wx.request()
  • wx.setStorage()
  • wx.getStorage()
wx.request({ url: API_URL + vr_list_offset, success: function { that.setData({ vr_list: response.data.result }) }}); wx.setStorage({ key:"vr_list", data:that.data.vr_list});wx.getStorage({ key:'vr_list', success:function{ console.log; } });

通晓完那多少个点之后,就足以动手做二个基础的demo啦,祝各位好运撒!

  1. 本猿此前也玩过react native,据自个儿粗浅的明白,微信小程序的DEMO搭建绝对凯雷德N会轻巧些,开采功用更加高,但如今的API文书档案太过简陋了,相关的零部件描述也太少。

  2. IDE有待革新,还木有linux遇到,不嗨森!!BTW,刚强提出帮衬VIM

  3. navigator落成page间的跳转,但缺少能跳转并传递对象的法子啊,难道只好通过setStorage()? 依然自家没找到??

  4. 零件少了点啊,木有webview,木有iframe~~~

微信小程序设计指南微信小程序支付指南微信公众平台 |小程序 API文书档案微信小应用能源集中整理

本文Demo源码

本文由一分快三全天精准计划发布于1分快3全天计划官方网站-编程,转载请注明出处:反正本猿被刷屏了

关键词: