美文网首页微信小程序微信小程序开发微信小程序
利用豆瓣,高德,每日一文等API制作的微信小程序

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

作者: myair | 来源:发表于2019-04-02 21:08 被阅读2次

    微信小程序开发介绍

    1.常用组件开发使用

    swiper(滑块视图容器)的基本用法:
    

    主要可以参照文档


        配置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"
        }
        ]
      },
    

    这些图标可以在阿里巴巴矢量图上去找


        自定义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"
            },
    

    页面跳转出现的问题

    <font color="yellow">navigateTo </font>:wx.navigateTo(Object object)保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。

    <font color="yellow">redirectTo</font> wx.redirectTo(Object object)
    关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

    <font color="yellow">switchTab</font>:wx.switchTab(Object object)
    跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面


    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入门

    箭头函数

     () =>{}
    
    

    模板字符串

    `${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

    相关文章

      网友评论

        本文标题:利用豆瓣,高德,每日一文等API制作的微信小程序

        本文链接:https://www.haomeiwen.com/subject/tzbnbqtx.html