前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序电影模板

微信小程序电影模板

作者头像
达达前端
发布2019-08-08 15:01:58
4.5K0
发布2019-08-08 15:01:58
举报
文章被收录于专栏:达达前端达达前端

image.png

image.png

代码语言:javascript
复制
{
  "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安装

代码语言:javascript
复制
npm i vant-app -S --production

通过 yarn 安装

代码语言:javascript
复制
yarn add vant-weapp --production

通过git下载Vant Weapp源代码

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

代码语言:javascript
复制
git clone https://github.com/youzan/vant-weapp.git

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

代码语言:javascript
复制
ES6
"usingComponents": {
  "van-button": "/path/to/vant-weapp/dist/button/index"
}
ES5
"usingComponents": {
  "van-button": "/path/to/vant-weapp/lib/button/index"
}

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

代码语言:javascript
复制
<van-button type="primary">按钮</van-button>

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

安装项目依赖

代码语言:javascript
复制
npm install

执行组件编译

代码语言:javascript
复制
npm run dev

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

代码语言:javascript
复制
@import "path/to/vant-weapp/dist/common/index.wxss";

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

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

代码语言:javascript
复制
<view class="van-ellipsis">这是一段宽度限制 250px 的文字,后面的内容会省略</view>

<!-- 最多显示两行 -->
<view class="van-multi-ellipsis--l2">这是一段最多显示两行的文字,后面的内容会省略</view>

<!-- 最多显示三行 -->
<view class="van-multi-ellipsis--l3">这是一段最多显示三行的文字,后面的内容会省略</view>
代码语言:javascript
复制
<!-- 上边框 -->
<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

代码语言:javascript
复制
npm install --save request

npm install --save request-promise

image.png

代码语言:javascript
复制
var rp = require('request-promise');
代码语言:javascript
复制
npm install --save request

npm install -g npm

npm install --save request-promise
代码语言:javascript
复制
{
  "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

代码语言:javascript
复制
// 监听用户下拉动作
onPullDownRefresh: function() {

}
// 页面上拉触底事件的处理函数
onReachBottom: function() {
}
onShareAppMessage: function() {
}

JSON.parse

代码语言:javascript
复制
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) => {
 
 }));
}
}

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

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.08.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Vant组件库
  • 通过 yarn 安装
  • 安装项目依赖
  • 执行组件编译
    • request
    相关产品与服务
    ICP备案
    在中华人民共和国境内从事互联网信息服务的网站或APP主办者,应当依法履行备案手续。腾讯云为您提供高效便捷的 ICP 备案服务。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档