利用豆瓣，高德，每日一文等API制做的微信小程序

时间 2019-11-21

标签利用豆瓣每日一文 api 制做微信程序繁體版

原文原文链接

微信小程序开发介绍

1.经常使用组件开发使用

swiper（滑块视图容器）的基本用法：
复制代码

主要能够参照文档javascript

配置tabBar(微信小程序自带)
复制代码

"tabBar": {
    "list": [{
      "pagePath": "pages/post/post",
      "text": "文章",
      "iconPath": "/images/icon/文章.png",
      "selectedIconPath": "/images/icon/文章 (1).png"
    },{
      "pagePath": "pages/movies/movie",
      "text": "电影",
      "iconPath": "/images/icon/电影.png",
      "selectedIconPath": "/images/icon/电影 (1).png"
    },
    {
      "pagePath": "pages/home/home",
      "text": "个人",
      "iconPath": "/images/icon/个人.png",
      "selectedIconPath": "/images/icon/个人 (1).png"
    }
    ]
  },
复制代码

这些图标能够在阿里巴巴矢量图上去找html

自定义tabBar
复制代码

<view class="container">

  <view class='tab'> <view class='tab-nav'> <view class='{{current==0?"on":""}}' data-current="0" bindtap='tab'>正在·热映</view> <view class='{{current==1?"on":""}}' data-current="1" bindtap='tab'>即将上映</view> </view> </view>
  <view class="content" style="height:{{ height }}">
    <swiper class='tab-box' current="{{current}}" bindchange="eventchange"> <swiper-item> 内容一 </swiper-item> <swiper-item> 内容二 </swiper-item> </swiper> </view> </view>
复制代码

2.微信小程序开发遇到的坑

let that=this;
复制代码

特别要注意在一个函数里面使用this，this的指针的地址已发生了变换，另外要去数据的时候切莫粗枝大叶直接this. 你想要的数据,加上this.data再去取数据
复制代码

发送https异步请求时:记得设置请求头
复制代码

header: {
          "Content-Type": "json"
        },
复制代码

页面跳转出现的问题java

navigateTo ：wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。可是不能跳到 tabbar 页面。git

redirectTo wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。可是不容许跳转到 tabbar 页面。es6

switchTab：wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其余全部非 tabBar 页面github

3.插件的使用

3.1日历插件

在设置里面的第三方设置里面添加插件
复制代码

//在app.json
 "plugins": {
    "calendar": {
      "version": "1.2.1",
      "provider": "appid"
    }
  },
//在须要引用的页面里写
{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar"
  }
}
复制代码

4.模态框的使用

<modal hidden="{{hiddenmodalput}}" title="喜欢电影并添加标签" confirm-text="添加" cancel-text="取消" bindcancel="cancel" bindconfirm="confirm">
    <input type='text' placeholder="标签" focus='true' name="tag" value="{{ input_tag }}" bindinput="addTag"/> </modal> 
复制代码

5.localStroage数据存储

//同步：
    wx.getStorageSync("speciallist");
//异步：
  wx.getStorage({
      key: '',
      success: function(res) {},
    })
     
复制代码

小程序业务逻辑介绍

1.文章页面

顶部栏的包括今天的日期和天气（高德定位）
中间部分为今天精选文章的摘选
图书图片进去就是一个书架，天天会添加不一样做家的文章
复制代码

2.电影页面

分已经上映的电影和即将上映的电影，可按分数排序和默认排序
复制代码

3.主页

统计阅读的字数，将阅读过的，喜欢的文章用不用的颜色加以显示
收藏过的电影也出如今这里
复制代码

ES6语法

推荐阮一峰的ES入门正则表达式

箭头函数json

() =>{}

复制代码

模板字符串canvas

`${key}`

复制代码

正则表达式小程序

你们能够参照这里正则表达式

API接口

1.豆瓣

//正在上映
'https://api.douban.com/v2/movie/in_theaters'
//即将上映
'https://api.douban.com/v2/movie/coming_soon'

复制代码

2.高德

高德地图的使用

3.每日一文

每日一文接口:
https://interface.meiriyiwen.com/article/day?dev=1&date=20190331
复制代码

4.调用腾讯云语音识别功能

一句话识别

引入图标字体

图标字体转换网址

canvas画图（无需后台服务器）

小程序截图

源码

等整理完了就会发在github