微信小程序电影模板

骑猪看日落 2021-09-30 15:30 849阅读 0赞

\[外链图片转存失败(img-STw401rR-1565101469846)([https://upload-images.jianshu.io/upload\_images/11158618-52efd0adc4d95b06.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-52efd0adc4d95b06.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

\[外链图片转存失败(img-u4QekWfY-1565101469848)([https://upload-images.jianshu.io/upload\_images/11158618-59cbfbb72f12db5b.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-59cbfbb72f12db5b.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

{
      "pages": [
        "pages/movie/movie",
        "pages/profile/profile",
        "pages/comment/comment"
      ],
      "window": {
        "backgroundColor": "#F6F6F6",
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#E54847",
        "navigationBarTitleText": "最新电影",
        "navigationBarTextStyle": "white"
      },
      "tabBar": {
        "color": "#000",
        "selectedColor": "#E54847",
        "list": [
          {
            "pagePath": "pages/movie/movie",
            "text": "电影",
            "iconPath": "images/film.png",
            "selectedIconPath": "images/film-actived.png"
          },
          {
            "pagePath": "pages/profile/profile",
            "text": "我的",
            "iconPath": "images/profile.png",
            "selectedIconPath": "images/profile-actived.png"
          }
        ]
      },
      "sitemapLocation": "sitemap.json"
    }

## Vant组件库 ##

Vant Weapp  
UI库使用Vant Weapp  
地址：  
[https://youzan.github.io/vant-weapp][https_youzan.github.io_vant-weapp]

轻量，可靠的小程序UI组件库

小程序端电影列表

发送请求方式

小程序端发送wx.request()  
协议支持，只支持https  
是否备案，经过icp备案  
域名个数限制20个

云函数  
第三方库（request,got）  
根据第三方库决定  
可以不备案  
无限制

request-promise

Vant Weapp  
轻量，可靠的小程序UI组件库

通过npm安装

npm i vant-app -S --production

# 通过 yarn 安装 #

yarn add vant-weapp --production

通过git下载Vant Weapp源代码

将dist或lib目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

引入组件  
app.json或index.json中配置按钮对应的路径即可

ES6
    "usingComponents": {
      "van-button": "/path/to/vant-weapp/dist/button/index"
    }
    ES5
    "usingComponents": {
      "van-button": "/path/to/vant-weapp/lib/button/index"
    }

使用组件  
引入组件后，可以在wxml中直接使用组件

<van-button type="primary">按钮</van-button>

在开发者工具中预览示例小程序

# 安装项目依赖 #

npm install

# 执行组件编译 #

npm run dev

引入  
在 app.wxss 中引入内置样式

@import "path/to/vant-weapp/dist/common/index.wxss";

当文本内容长度超过容器最大宽度时，自动省略多余的文本。

文字省略  
当文本内容长度超过容器最大宽度时，自动省略多余的文本。

<view class="van-ellipsis">这是一段宽度限制 250px 的文字，后面的内容会省略</view>
    
    
    <view class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，后面的内容会省略</view>
    
    
    <view class="van-multi-ellipsis--l3">这是一段最多显示三行的文字，后面的内容会省略</view>

<view class="van-hairline--top"></view>
    
    
    <view class="van-hairline--bottom"></view>
    
    
    <view class="van-hairline--left"></view>
    
    
    <view class="van-hairline--right"></view>
    
    
    <view class="van-hairline--top-bottom"></view>
    
    
    <view class="van-hairline--surround"></view>

[https://youzan.github.io/vant-weapp/\#/intro][https_youzan.github.io_vant-weapp_intro]

## request ##

npm install --save request
    
    npm install --save request-promise

\[外链图片转存失败(img-P2eJEhFH-1565101469851)([https://upload-images.jianshu.io/upload\_images/11158618-1da1454cde2974c1.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-1da1454cde2974c1.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

var rp = require('request-promise');

npm install --save request
    
    npm install -g npm
    
    npm install --save request-promise

{
      "name": "movielist",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "request": "^2.88.0",
        "request-promise": "^4.2.4",
        "wx-server-sdk": "latest"
      }
    }

电影列表的接口：  
[http://api.douban.com/v2/movie/in\_theaters][http_api.douban.com_v2_movie_in_theaters]

电影详情：  
[http://api.douban.com/v2/movie/subject/id][http_api.douban.com_v2_movie_subject_id]

// 监听用户下拉动作
    onPullDownRefresh: function() {
    
    }
    // 页面上拉触底事件的处理函数
    onReachBottom: function() {
    }
    onShareAppMessage: function() {
    }

JSON.parse

submit: function() {
     console.log(this.data.content, this.data.score);
     // 上传图片到云存储
    let promiseArr = [];
    for(let i=0; i<this.data.images.length;i++){
     promiseArr.push(new Promise((reslovie, reject) => {
     
     }));
    }
    }

--------------------

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

--------------------

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达叔小生][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

\[外链图片转存失败(img-P7dv3l63-1565101469856)([https://upload-images.jianshu.io/upload\_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240][https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240])\]

[https_upload-images.jianshu.io_upload_images_11158618-52efd0adc4d95b06.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-52efd0adc4d95b06.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_upload-images.jianshu.io_upload_images_11158618-59cbfbb72f12db5b.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-59cbfbb72f12db5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[https_youzan.github.io_vant-weapp]: https://youzan.github.io/vant-weapp
[https_youzan.github.io_vant-weapp_intro]: https://youzan.github.io/vant-weapp/#/intro
[https_upload-images.jianshu.io_upload_images_11158618-1da1454cde2974c1.png_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-1da1454cde2974c1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240
[http_api.douban.com_v2_movie_in_theaters]: http://api.douban.com/v2/movie/in_theaters
[http_api.douban.com_v2_movie_subject_id]: http://api.douban.com/v2/movie/subject/id
[Link 1]: https://www.jianshu.com/u/c785ece603d1
[https_upload-images.jianshu.io_upload_images_11158618-9ab0d3fef85d80ce_imageMogr2_auto-orient_strip_imageView2_2_w_1240]: https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240