258资源分享网

初窥todo: 添加音乐到收藏（最近）列表 歌词滚动从一个hello world开始微信开发者工具生成 目录如下：. |-- app.js |-- app.json |-- app.wxss |-- pages | |-- index # 主页 | | |-- index.js | | ...

 

 

 

初窥

todo:

[ ] 添加音乐到收藏（最近）列表

[ ] 歌词滚动

从一个hello world开始

微信开发者工具生成 目录如下：

. |-- app.js |-- app.json |-- app.wxss |-- pages ||-- index # 主页 |||-- index.js |||-- index.json |||-- index.wxml || `-- index.wxss | `-- log # 日志页面 |||-- log.js |||-- log.json |||-- log.wxml || `-- log.wxss `-- utils # 工具 `-- util.js

大体为:
每一个page即是一个页面文件 ，每个页面有一个js/wxml/wxss/json文件 规定：描述页面的这四个文件必须具有相同的路径与文件名。

全局下同路，为公共的逻辑，样式，配置

与html不同:用view text navigator 代替 div span a

开发者文档走马观花

app.json: 注册pages window tabBar networkTimeout
 

组件说明

*.js: 作为逻辑层 与wxml交互 有着丰富的 
网络，
媒体，
文件，
数据缓存，
位置，
设备，
界面...的api

官方文档

*.wxml: 数据驱动的视图层 + 微信提供了大量的组件 表单 导航 媒体 ... 官方组件不够,weui来凑

weui为

小程序

提供了 weui.wxcss 但大多是造官方组件的轮子

这里精选,也算是补充两个常用组件

对于小程序没有DOM操作 不熟悉mvvm思想的同学 是个很好的入门

navbar
 

<!-- wxml --> <view class="weui-tab"> <view class="weui-navbar"> <block wx:for="{{tabs}}" wx:key="*this"> <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"> <view class="weui-navbar__title">{{item}}</view> </view> </block> <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view> </view> <view class="weui-tab__panel"> <view class="weui-tab__content" hidden="{{activeIndex != 0}}">选项一的内容</view> <view class="weui-tab__content" hidden="{{activeIndex != 1}}">选项二的内容</view> <view class="weui-tab__content" hidden="{{activeIndex != 2}}">选项三的内容</view> </view> </view>

block渲染data里面的四个tabs,slider为激活tab选项时候的表现，panel为内容面板

//js var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置 Page({ data: { tabs: ["选项一", "选项二", "选项三"], activeIndex: 1, sliderOffset: 0, sliderLeft: 0 }, onLoad: function () { var that = this; wx.getSystemInfo({ success: function(res) { that.setData({ sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2, sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex }); } }); }, tabClick: function (e) { this.setData({ sliderOffset: e.currentTarget.offsetLeft, activeIndex: e.currentTarget.id }); } });

了解mvvm思想的同学不难看出 通过tabs数组渲染出来选项后每次点击获取id 然后通过设置hidden显示或隐藏

searchbar