与你一块儿写小程序

时间  2019-11-25
标签 与你 一块儿 程序 繁體版
原文   原文链接

最近一段时间在学习怎么写小程序，而后本身利用课外时间，也撸了一个。一直都很喜欢网易蜗牛读书这款App，对于喜好的事物老是不由自主的，因而就仿照网易蜗牛读书的App简单作了这款小程序。html

项目地址：杳杳飞花/Reading

项目预览：

img

项目准备：

你们如果感兴趣，能够跟着我一块儿来作哟^_^前端

☟ 蓝体点击就能跳转到相应页面进行下载或者查看教程git

一、微信开发者工具 他能帮助咱们快速的进行小程序的开发。固然，在开发以前咱们还须要拥有一个小程序帐号（注册教程），经过帐号咱们就可以管理本身的小程序了。须要注意的是，只有满了18岁的童鞋们才能够注册。github

二、vs code （密码：g2g5） 64位系统的，其余版本就本身去搜一下安装包啦。虽然在微信开发者工具里面就可以直接写，但仍是喜欢在vs code里面进行coding。这个按你们喜爱自由选择哦。json

三、Iconfont-阿里巴巴矢量图标库 一个阿里爸爸作的开源图库，它不只有几百个公司的开源图标库，还有各式各样的小图标。有了这个图标库真是大大提升了咱们的效率，咱们可以根据须要进行图标搜索，还可以设置颜色、大小和图片格式。你想要的基本都有哦~小程序

四、EasyMock 简单高效的伪造数据 用于后台的数据模拟，获得JSON数据，方便开发。微信小程序

五、微信小程序开发文档 W3C的这个文档真是超级详细，咱们可以在这里查找到微信小程序的API、组件以及一些框架等。微信

另外还使用了一款MarkMan进行测量，但如果追求精准还原的话，仍是用PS更细腻。数据结构

项目开发过程：

每一次的开发都是一个成长的过程。在开发过程当中，咱们会遇到各类问题，这就给了咱们一个独立思考的空间，可以锻炼咱们解决问题和查询文档的能力。固然，在思考查询以后还能够请教他人、进行探讨，这样每每可以帮助咱们快速的找到盲点，甚至可以了解到更多咱们忽视的点。和别人的交流也是学习中很重要的一环，因此在此分享了本身小小的一点经验，欢迎一块儿交流，一块儿学习。微信开发

一、开始项目

在项目开始时，咱们首先在 app.json 文件中配置主体界面，设置好tabBar 。在这里咱们对小程序设置肯定了一个总体的基调。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "网易蜗牛读书",
"navigationBarTextStyle":"black"
  },
  "tabBar":{
"color":"#999999",
"selectedColor":"#444444",
"backgroungColor":"#ffffff",
"borderStyle":"#e0e0e0",
"list": [
  {
    "pagePath":"pages/leader/leader",
    "iconPath": "assets/icons/lingdu.png",
    "selectedIconPath": "assets/icons/lingdu_sel.png",
    "text":"领读"
  },
  {
    "pagePath":"pages/stack/stack",
    "iconPath": "assets/icons/stack.png",
    "selectedIconPath": "assets/icons/stack_sel.png",
    "text":"分类"
  },
  {
    "pagePath": "pages/bookdesk/bookdesk",
    "iconPath": "assets/icons/bookdesk.png",
    "selectedIconPath": "assets/icons/bookdesk_sel.png",
    "text":"书桌"
  },
  {
    "pagePath":"pages/mine/mine",
    "iconPath": "assets/icons/mine.png",
    "selectedIconPath": "assets/icons/mine_sel.png",
    "text":"个人"
  }
]
 }
复制代码

对于 pages 页面，在开发过程当中进行过不少次调整。到如今为止以为还算整洁和便于管理了。在起初，无论是一级页面仍是二级页面，我都把它们放在了 pages 目录下。这样一开始还不以为有什么，但是到后来页面愈来愈多，要对以前写过的页面进行修改和调整的时候，恍然间发现一堆文件夹，查找起来就以为眼花缭乱，还要和页面进行配对，很是恼火。因而按照页面不一样的级别层次，进行了相应的调整。按照不一样的tabBar肯定了主体的文件夹，而后各级页面又分别在各自所属层级的目录下。另外对于页面的命名尽可能通俗易懂，这样方便本身对各页面进行查看和管理。

"pages":[
"pages/index/index", 
"pages/leader/leader",  // 领读人  
"pages/leader/stories/stories", 
"pages/leader/authors/authors", 
"pages/stack/stack",  // 分类
"pages/stack/booklist/booklist", 
"pages/stack/booklist/bookdetail/bookdetail",
"pages/bookdesk/bookdesk",   // 书桌
"pages/mine/mine",   // 个人
"pages/mine/news/news",    
"pages/logs/logs" 
  ],
复制代码

img

在分类页面下具备多层级的一个页面建立展现：

img

因此在项目开始时首先思考的就是文件的排版问题，一个合理的结构，可以加强项目的可读性，之后操做和维护也更加方便，可以节约必定的时间。

小技巧： 在建立pages页面时，若是咱们在微信开发者程序的app.json文件中建立，就会自动的生成相应的文件夹，就不用咱们一个一个去建立了。

二、页面布局和样式

小程序属于轻量级的应用，因此在忠于原App的基础上，对某些页面进行了一些调整。另外，在这里全部的页面都是我切的，可能会有人说不少页面均可以引用第三方框架，没有必要写原生代码。其实都没有错，要看本身写小程序是为了什么。我作这款小程序是为了学习小程序的开发，另外本身的前端之旅仍是刚刚开启，因此为了在 coding 中锻炼本身对各类结构的敏感性，加深本身对样式属性的理解，我选择了本身写原生代码。

其实第三方框架是很是好的轮子，像微信团队开发的 weui 框架就很好用，它提供了不少的组件，可以让你摆脱切页面的繁琐，减小开发时间。对于 weui 的使用我也不是很熟练，因此在后续的学习中，还会继续修改这个小程序，用不一样的方法实现页面。 另外，在命名时，我使用了BEM规范，这样便于对页面结构的理解，使代码更易读。BEM命名法则给咱们提供了一个很好的模板，在命名中就能体现各个元素之间的关系，CSS的命名更加语义化，元素更易读懂。并且独一无二的命名方式，使得代码可以获得更好的复用。

stack.wxml

img

三、使用 easy-mock 造数据

写完基本样式以后，要思考的就是数据问题。咱们开发的页面不多有静态的。咱们把数据写在页面中没有任何意义还平白增长了工做量。此时咱们就须要模拟后台数据，让这些数据可以经过请求渲染到页面上。easy-mock 就给咱们提供了一个很好的平台来造假数据，而后生成URL 经过 wx.request() 方法来获取数据，实现页面加载数据。

另外还能够在本地写假数据。今天在阅读别人文章时有看到用require()方式来请求数据的。对于这个不是很懂，经过查询以后才发现这是CommonJS 中的模块实现。实现一项功能的方法有不少种，我以为咱们不能只知足于一种方法，而应该普遍的涉猎，经过对不一样方法的学习，让本身的知识储备更庞大。

项目基本功能：

一、小程序启动页面的实现

在这里我使用了setInterval（）和clearInterval（）方法来实现，而后经过switchTab来实现跳转

Page({
  data: {
    time:3
  },
  onLoad: function () {
    var count = setInterval(()=>{   
      this.setData({
        time : this.data.time -1
      });
      if(this.data.time == 0) {  
        wx.switchTab({
          url:'../leader/leader',
          complete:function(res) {
          }
        })
        clearInterval(count);
      }
    },1000);
  }
})
复制代码

二、跳转页面时获取id, 获取不一样数据

一开始本身对数据获取还不是很熟练，只能进行简单的单页面渲染。后来经过查文档和摸索，逐渐的可以进行复杂一些的数据获取。另外，在setData时，若是不清楚结构，可使用console.log(); 方法及时的查看数据结构，一层层的剥开找到咱们须要的数据层。 为了更便于理解，附上两张动图展现，能够发现当我点击不一样文章以后，跳转的页面获取的数据也不同。

领读

img

分类

img

在这里分类页面的数据更整齐一些，就以它为例来讲一说我是如何经过id来动态选择数据的。首先要清楚的是stack分类页面和跳转到的booklist详情页。在这里是经过navigator来跳转的，咱们在url中设置表达式来动态获取id，url="booklist/booklist?id={{index}}"，而后在 booklist.js 中，经过获取到的id，进行数据的选择。

stack:

stack.wxml

          <view>
              <view class="page-search"></view>
              <scroll-view wx:for="{{stack}}" wx:key="{{index}}" scroll-y="true">
                  <navigator class="stack-view " url="booklist/booklist?id={{index}}">
                      <image src="{{item.typeCover}}" class="stack-image"></image>
                      <text class="stack-name">{{item.bookTypes}}</text>
                      <text class="stack-numb">{{item.bookNumb}} ></text>
                  </navigator>
                  <view class="line"></view>
              </scroll-view>
          </view>
      </view>
复制代码

stack.js

Page({
	  data: {
	    stack:[],
	    id: ""
	  }, 
	  onLoad: function () {
	      var that = this;
		wx.request({
		  url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		  success: function(res) {
		    console.log(res.data.data.stack);
		    console.log(res.data.data.List);              
		    that.setData({
		      stack: res.data.data.stack,
		      id: res.data.data.List
		    })
		  }
		})
	      },   
	})
复制代码

booklist:

booklist.wxml  

<view>
	  <view>
	      <view wx:for="{{bookList}}" wx:key="{{index}}">
		  <view class="book-list-root" bindtap="bindViewTap">  
		      <view class="book-list-child">
			  <view>
			      <text class="book-list-name">{{item.bookName}}</text>
			  </view>
			  <view>
			      <text class="book-list-autor">{{item.authorName}}</text>
			  </view>
			  <view class="book-list-des">
			      <text>{{item.bookDes}}</text>
			  </view>
		      </view>
		  </view>
		  <view class="line"></view>            
	      </view>
	  </view>
      </view>
复制代码

booklist.js

Page({
	  data: {
	      bookList:[],
	      stack:[]
	    },
	  onLoad: function (params) {
	    var that = this;
	      wx.request({
		url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
		success: function(res) {
		  that.setData({
		    bookList: res.data.data.stack[params.id].List.bookList,
		  })  
		}
	      })
	      },
	  })
复制代码

三、对navigationBarTitleText的动态修改

img

在各个页面的JSON文件中，咱们可以设置页面的标题，可是当咱们进入不一样页面须要获取不一样标题时，就须要动态的进行修改。其实实现起来很简单，咱们知道经过wx.setNavigationBarTitle() 方法就可以修改页面标题，而后跟第二点所述的方式同样，经过id来达到动态获取的效果。

另外要注意的是，咱们要将JSON中的navigationBarTitleText设置为空，这样在跳转的过程当中就不会有原始标题和修改标题之间跳转的一个效果，而是直接显示须要的标题。

.json
	  {
	      "navigationBarBackgroundColor": "#fff",
	      "navigationBarTitleText": " ",
	      "navigationBarTextStyle": "black"
	  }
       .js
	onLoad: function (params) {
	  var that = this;
	    wx.request({
	      url:"https://www.easy-mock.com/mock/5a23a9a2ff38a436c591b6fa/getArticInfo",
	      success: function(res) {
		var bTypes = res.data.data.stack[params.id].bookTypes;
		wx.setNavigationBarTitle({ 
		  title: bTypes,
		},1);
	      }
	    })
	  },
复制代码

四、两种页面跳转方式

（1）使用 navigator 方式

navigator的跳转可以保留当前页面，可返回

<navigator class="stack-view " url="booklist/booklist?id={{index}}">
      //  点击部位，触发便可跳转
      </navigator>

      <view class="page__bd-items page-flex" bindtap="tomyNews">
		  <view class="page-items-lt">
		      <image src="../../assets/images/mines/news.png" />
		  </view>
		  <view class="page-items-md">个人消息</view>
		  <view class="page-items-others"></view>
		  <view class="page-items-ft">></view>
      </view>

      tomyNews:function(e) {
	  wx.navigateTo({
	    url:'news/news'
	  })
	},
复制代码

须要注意的是：程序中要求页面的层级最多只能有五层，由于这种方式保留当前页面，也就是说以这种方式跳转页面，最多只能打开5个页面。

（2）使用 switchTab 方法

该方法可以跳转到 tabBar 页面，并关闭其余全部非 tabBar 页面。

wx.switchTab({
              url:'../leader/leader',
              complete:function(res) {
              }
            })
复制代码

五、swiper实现轮播

经过 swiper 和 swiper-item 实现了书桌页面的轮播效果。

img

这里的相关属性就直接使用了网上的图片：

img 

<swiper class="swiper" indicator-dots="true" 
interval="5000" duration="1000">
        <swiper-item>
            <view class="page__bd">
                <view class="page__bd-books center">
                   <image
                    src="../../assets/images/book1.png" />
                </view>
                <view class="page__bt">
                    <view class="page__bt-readings">
                    南风知我意</view>
                    <view class="page__bt-items center">
                        <view>1186人在读</view>
                        <image 
                        src="../../assets/images/rg.png" />
                    </view>
                </view>
            </view>
        </swiper-item>
 </swiper>
复制代码

其中，swiper-item 能够经过 wx:for 来循环。

总结：

这一次的小程序开发，让我学到了不少东西。咱们是为了学习而开发项目。所以在coding的时候要沉住气，不要急躁，遇到问题就及时的去查文档或者请教别人，而后多想想实现的方法，是否是还可以经过其余办法来实现。这样在不断的思考和解决问题中，在不断的踩坑中才能让本身快速的成长起来。

另外，其实还有不少功能和细节没有处理好，这一次的分享并不表明着结束，经过不断的学习，还将不断的对项目功能进行完善和处理各类细节。

Github：杳杳飞花/Reading

☝想要一个star哦☺
复制代码

欢迎一块儿交流学习哟 ☞ ChestNutsJun@163.com

Blog: 杳杳飞花的博客

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程