微信小程序，入门小dome，仿网易读书
看了一些关于小程序的demo,自己也仿写了这个dome，在此基础上做了有些小改动，还有些功能欠缺，后期可以不上，但基本页面功能都有，有入门兴趣的同学可以学一学。
1、微信开发者工具 他能帮助我们快速的进行小程序的开发,可以边写边预览，只需保存一下就可以。
2、Iconfont-阿里巴巴矢量图标库 一个阿里爸爸做的开源图库，它不仅有几百个公司的开源图标库，还有各式各样的小图标。有了这个图标库真是大大提高了我们的效率，我们能够根据需要进行图标搜索，还能够设置颜色、大小和图片格式，这个项目中仅仅下载了我需要的图片。
3、EasyMock 简单高效的伪造数据 用于后台的数据模拟，得到JSON数据，方便开发，个人免费， 前端自定义数据格式，同时方便后台的输出格式。
4、微信小程序开发文档 W3C的这个文档真是超级详细，我们能够在这里查找到微信小程序的API、组件以及一些框架等。
5、 WeUI, 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一，有兴趣的同学可研究一下，本项目纯手写。
-
app.json 全局设置，快捷添加页面、底部切换栏、头部导航
{ "pages":[ "pages/index/index", // 封面 "pages/logs/logs", // 日志 "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/mine/editInfo/editInfo" ], // 全局头部导航栏设，每个页面也可以单独设置 "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "蒂花之秀读书", "navigationBarTextStyle":"black" }, // 底部切换栏 "tabBar":{ "color": "#6d4015", "selectedColor": "#1296db", "backgroundColor": "#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": "我的" } ] } } -
数据请求和双向绑定
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 请求数据 var that = this; wx.request({ url: "https://www.easy-mock.com/mock/5a31e9eb513048307be27a9a/test/", success: function(res){ that.setData({authors: res.data.data.index}); } }) },注：关于数据的操作（修改，添加，删除，清空），动态显示的方法（增加数据：concat()增加数组，前后拼接可放置首位，删除数据：找到index,splice(index, 1); 清空数据直接赋值 [];），稍后补上
-
提示弹窗
/** * 生命周期函数--监听页面显示 */ onShow: function () { // 加载提示 wx.showToast({ title: '加载中', icon: 'loading', mask: true, duration: 500 }); setTimeout(function () { wx.hideToast(); }, 500) }, -
模板编写（抽取相同部分）
/** * mineInfo.wxml: template标签包裹， name属性，即这个模板的名字 */ <template name="mineInfo"> <view class='page-items page-flex' bindtap='toMyInfo' id='{{id}}'> <view class='page-items-lt'> <image src='../../assets/images/mines/{{urlName}}.png'></image> </view> <view class='page-items-md'>{{title}}</view> <view wx:if="{{id != 6}}" class='page-items-others'>{{num}}</view> <view class='page-items-ft'>>></view> </view> </template>模板引用
<import src="./mineInfo/mineInfo.wxml"/>wxml中需要写入的地方：
<template is="mineInfo" data="{{...mineNew}}"></template>注：js中，的数据结构
data: { mineNew: { urlName: "", title: "", num: "" } }wxss的引用：
@import "./mineInfo/mineInfo.wxss";注：这里只是最简单的模板引用，稍微复杂的模板有多个template，在引用的文件中需要通过模板的name判断你需要的模板，有兴趣的同学可以试试。 小程序模板
<template name="odd"> <view> odd </view> </template> <template name="even"> <view> even </view> </template> <block wx:for="{{[1, 2, 3, 4, 5]}}"> <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block> -
页面间跳转
-
需要事件触发，如:wxml: bindtap="change"
change: function(){ wx.navigateTo({ url: "../index/index" }) }
注：navigateTo 与 redirectTo的区别，navigeteTo可以保留前面的页面，但是最多不超过5个，redirectTo不会保留前面页面，清除前面页面的缓存。
-
只保留有tabBar页面，tabBar页面的数据是不会被清除
wx.switchTab({ url: "../leader/leader", complete: function(e){ // 代码块 } });
-
这次学习小程序学到很多知识，尽管是一些常用的代码，但对我们新手来说是一次很好的敲门砖，快速入门。看起来页面很多，其实没几个，慢慢来，不要一下就想写完，有问题查资料，写完你会发现其实都是很简单的东西。
接下来就开始动动的巧手，祝你有个愉快、充实的旅程。
不要吝啬您手中的star哦！！！
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent