• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mpvue从一无所有开始仿大众点评小程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

最近尝试了下用mpvue框架开发小程序,它是基于vue开发的。

官方介绍:
mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验。

但就使用感受来说,还不如学原生呢,主要是mpvue和原生的客服体验差别太大了,mpvue八白年才有一次更新,而原生在小程序团队的不断完善下已经愈来愈好了,而且新开发的接口通过原生进行使用也会省去不少烦恼~

但会vue上手mpvue确实比较简单哈,下面使用mpvue从一无所有开始仿大众点评小程序。


一、开发准备(假设没有部署任何环境)

(1) 安装微信开发者工具

(2) 安装node.js(主要是使用npm,方便对包进行管理)

(3) 全局安装vue-cli, cmd中运行

npm install --g vue-cli

二、安装mpvue模板

(1) 选择一个工作路径,cmd中运行

vue init mpvue/mpvue-quickstart dianping-demo

安装途中询问的选项基本都可以选y,但如果问到是否使用ESLint时,墙裂建议选n!
ESlint主要是用来进行语法检测的,在码字时不时报错,很!烦!的!如果手残点了y,也可以按这里的操作来取消。
(2) 进入创建的dianping-test目录,并安装依赖

cd dianping-demo
npm install

(3) 编译运行项目

npm start

编译完成后,会显示下图,但先不必关闭这个窗口,因为如果修改代码并保存后,它会自动重新编译。

至此,一个简单的小程序就创建完成了。
使用微信开发者工具打开当前工作目录,即可看到当前的小程序。



##三、开发大众点评小程序 下面我们在这锅小程序模板的基础上修改,来进行大众点评小程序的开发。

(0) 首先我们来大致了解一下项目的文件结构

dianping-demo
├── package.json
├── project.config.json       
├── static 
├── node_modules 
├── dist           
├── src
│    ├── components
│    ├── pages
│    ├── utils
│    ├── App.vue
│    ├── app.json
│    └── main.js
├── config
└── build

我们主要关注的是src文件夹,在该文件夹下,模板已自动生成了一些文件。

  • src/components中存放的是在界面上可复用的组件;
  • src/pages中存放的是小程序的页面,相当于原生小程序中的pages
  • src/utils存放的是工具函数,一般模板小程序中的工具函数都用不上,可删;
  • App.vue是小程序的入口文件,控制小程序的整体逻辑,相当于原生小程序中的app.js+app.wxss
  • app.json控制小程序页面加载和状态栏,相当于原生小程序中的app.json
  • main.js中生成vue实例并挂载,相当于原生小程序的main.js

其他目录和文件主要是小程序的配置文件,想详细了解可看这篇博文使用mpvue开发小程序教程(二)
想了解原生小程序的目录结构看这里


(1) 全局配置
首先我们可以从这里下载icon等本地文件,将整个images文件夹放入static文件夹中(或直接将整个项目下载,然后将其中的static与当前的static合并),
distsrc/App.vuesrc/app.json中的原内容清空

将以下内容写入App.vue:

<script>
/*相当于原生小程序的app.js*/
export default {
}
</script>

<style>
/*将横向滑动栏隐藏*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}
</style>

将以下写入app.json

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "大众点评",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "#333",
    "borderStyle": "white",
    "list": [{
      "text": "首页",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/home.png",
      "selectedIconPath": "static/images/home-on.png"
    }, {
      "text": "排行榜",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/rankicon.png",
      "selectedIconPath": "static/images/rankicon-on.png"
    }, {
      "text": "关注",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/follow.png",
      "selectedIconPath": "static/images/follow-on.png"
    }, {
      "text": "我的",
      "pagePath": "pages/index/main",
      "iconPath": "static/images/myicon.png",
      "selectedIconPath": "static/images/myicon-on.png"
    }],
    "position": "bottom"
  }
}

(2) 页面配置 将```src/pages```下的所有原文件删除,然后在该目录下创建```index```文件夹,在```index```下创建```index.vue```、```main.js``` 再```main.js```中写入: ```node.js /*对每个页面生成vue实例,并挂载*/ import Vue from 'vue' import App from './index'

const app = new Vue(App)
app.$mount()

  <br>
(3) 首先在```index.vue```的```<template>```便签中进行页面结构的布置,可用HTML进行书写,以下代码段为例:
```html
<template>
<!--相当于原生小程序的index.wxml-->
<div class="container">
    <div v-for="(item, index) in category1" class="category1">
      <img :src=item.icon>
      <div class="desc">{{item.desc}}</div>
    </div>
</div>
</template>

页面模板遵循vue语法:

  • v-for="(item, index) in category1对category1中的对象进行循环;
  • 使用:src=item.icon将item.icon的值赋予src;
  • 使用双括号{{item.desc}}显示变量tem.desc的值。

(4) 然后在``` ```
(5) 在```

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序简单的推送消息流程发布时间:2022-07-18
下一篇:
小程序封装request请求发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap