[外链图片转存失败(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) => {

 }));

}

}

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

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

欢迎关注达叔小生的简书！

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

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

巴特西

微信小程序电影模板