用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

github精选:微信小程序开发小结

天下雪 2017-1-9 01:53

作者:yesifeng ,来自github原文地址第一步 项目配置一、编写app.json对整个项目的公共配置1、pages:配置页面路径(必须),列出所有的页面的路径,所有存在的页面都需要在此写出,否则在页面跳转的时候会报出找不 ...

作者:yesifeng ,来自github原文地址

第一步 项目配置


一、编写app.json

对整个项目的公共配置

1、pages:配置页面路径(必须),列出所有的页面的路径,所有存在的页面都需要在此写出,否则在页面跳转的时候会报出找不到页面的错误
2、window:窗口配置,配置导航及窗口的背景色和文字颜色,还有导航文字和是否允许窗口进行下拉刷新
3、tabBar:tab栏配置,配置tab栏背景色及出现位置,上边框的颜色(目前只支持黑或白),文字颜色及文字选中颜色,最核心的配置是list即tab栏的列表,官方规定最少2个,最多5个,每个列表项目可配置页面路径、文字、图标及选中时图标的地址
4、network:网络配置,配置网络请求、上传下载文件、socket连接的超时时间
5、debug:调试模式,建议开发时开启(true),可以看到页面注册、页面跳转及数据初始化的信息,另外报错的错误信息也会比较详细

  1. {
  2. "pages": [
  3. "pages/popular/popular",
  4. "pages/coming/coming",
  5. "pages/top/top",
  6. "pages/search/search",
  7. "pages/filmDetail/filmDetail",
  8. "pages/personDetail/personDetail",
  9. "pages/searchResult/searchResult"
  10. ],
  11. "window": {
  12. "navigationBarBackgroundColor": "#47a86c",
  13. "navigationBarTextStyle": "white",
  14. "navigationBarTitleText": "电影推荐",
  15. "backgroundColor": "#fff",
  16. "backgroundTextStyle": "dark"
  17. },
  18. "tabBar": {
  19. "color": "#686868",
  20. "selectedColor": "#47a86c",
  21. "backgroundColor": "#ffffff",
  22. "borderStyle": "white",
  23. "list": [{
  24. "pagePath": "pages/popular/popular",
  25. "iconPath": "dist/images/popular_icon.png",
  26. "selectedIconPath": "dist/images/popular_active_icon.png",
  27. "text": "热映"
  28. }, {
  29. "pagePath": "pages/coming/coming",
  30. "iconPath": "dist/images/coming_icon.png",
  31. "selectedIconPath": "dist/images/coming_active_icon.png",
  32. "text": "待映"
  33. },{
  34. "pagePath": "pages/search/search",
  35. "iconPath": "dist/images/search_icon.png",
  36. "selectedIconPath": "dist/images/search_active_icon.png",
  37. "text": "搜索"
  38. },
  39. {
  40. "pagePath": "pages/top/top",
  41. "iconPath": "dist/images/top_icon.png",
  42. "selectedIconPath": "dist/images/top_active_icon.png",
  43. "text": "口碑"
  44. }]
  45. },
  46. "networkTimeout": {
  47. "request": 10000,
  48. "downloadFile": 10000
  49. },
  50. "debug": true
  51. }

二、确定目录结构

根据UI图,提取组件和公共样式/脚本,以及page的目录

  • comm - 公用的脚本及样式
    • script - 公共脚本
      • config.js 配置信息 (单页数据量,城市等)
      • fetch.js 接口调用 (电影列表及详情,人物详情、搜索)
    • style - 公共样式
      • animation.wxss 动画
  • component - 公用的组件
    • filmList - 电影列表
      • filmList.wxml - 组件结构
      • filmList.wxss - 组件样式
  • dist - 静态资源
    • images 本地图片,主要存导航的图标 (样式中不可引用本地图像资源)
  • pages - 页面
    • popular - 页面文件夹 ("popular"为自定义的页面名称,页面相关文件的文件名需与页面名相同)
      • popular.js 页面逻辑
      • popular.wxml 页面结构
      • popular.wxss 页面样式
      • popular.json 页面窗口配置 (可参考app.json中的window配置)
  • app.js - 小程序整体逻辑 (初始化、显示、隐藏的事件,以及存放全局数据)
  • app.json - 小程序公共配置
  • app.wxss - 小程序公共样式

第二步 编写组件

电影列表

结构

  1. <template name="filmList">
  2. <block wx:if="{{showLoading}}">
  3. <view class="loading">玩命加载中…</view>
  4. </block>
  5. <block wx:else>
  6. <scroll-view scroll-y="true" style="height: {{windowHeight}}rpx" bindscroll="scroll" bindscrolltolower="scrolltolower">
  7. <view class="film">
  8. <block wx:for="{{films}}" wx:for-index="filmIndex" wx:for-item="filmItem" wx:key="film">
  9. <view data-id="{{filmItem.id}}" class="film-item" catchtap="viewFilmDetail">
  10. <view class="film-cover">
  11. <image src="{{filmItem.images.large}}" class="film-cover-img"></image>
  12. <view class="film-rating">
  13. <block wx:if="{{filmItem.rating.average == 0}}">
  14. 暂无评分
  15. </block>
  16. <block wx:else>
  17. {{filmItem.rating.average}}分
  18. </block>
  19. </view>
  20. </view>
  21. <view class=
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: yesifeng 来自: 原文地址

相关阅读