微信小程序电影模板
[外链图片转存失败(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安装
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)]
