微信小程序电影模板

2019-08-08 15:01:58 浏览数 (1)

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

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

微信 小程序 ICP备案 https

0 人点赞