image.pngimage.png

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

npm i vant-app -S --production

通过 yarn 安装

yarn add vant-weapp --production

通过git下载Vant Weapp源代码

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

git clone  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 requestnpm install --save request-promise

image.png

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

npm install --save requestnpm install -g npmnpm 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) => {  }));}}

若本号内容有做得不到位的地方（比方：涉及版权或者其余问题），请及时联络我们进行整改就可，会在第一时间进行解决。

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

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

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

博客 上一篇 目录 已是最后