微信小程序电影模板

最新推荐文章于 2024-08-23 11:56:19 发布

掘金-我是哪吒

最新推荐文章于 2024-08-23 11:56:19 发布

阅读量3.5k

点赞数 3

分类专栏：其他分类微信小程序开发

本文链接：https://blog.csdn.net/qq_36232611/article/details/98669430

版权

其他分类同时被 2 个专栏收录

554 篇文章 5 订阅

订阅专栏

微信小程序开发

31 篇文章 8 订阅

订阅专栏

[外链图片转存失败(img-STw401rR-1565101469846)(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)]

{
  "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

轻量，可靠的小程序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

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)]

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/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) => {
 
 }));
}
}

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