博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序开发
阅读量:5820 次
发布时间:2019-06-18

本文共 6135 字,大约阅读时间需要 20 分钟。

开发前准备

环境:

LTS版本

最新版

最新版


文档:

本项目技术栈基于

快速开始

1.克隆项目    git clone https://gitee.com/Fntys/met_wx.git2.进入项目    cd met_wx    3.安装依赖    npm install    4.启动构建    npm run dev    5.打开微信Web开发工具,导入项目

目录结构

├── build                       //  构建相关├── config                      //  配置相关├── dist                        //  打包相关├── node_modules                //  第三方模块├── src                         //  源代码│   ├── utils                   //  全局公用方法│   ├── pages                   //  所有页面文件 │   ├── components              //  业务组件 │   ├── assets                  //  图片 字体等静态资源│   ├── components              //  业务组件 │   ├── styles                  //  公共样式文件 │   ├── main.js                 //  入口文件 加载组件 初始化等│   ├── App.vue                 //  入口页面 ├── static                      //  第三方不打包资源├── .babelrc                    //  babel-loader 配置├── .eslintrc.js                //  eslint 配置项├── .postcssrc.js               //  后处理器├── .gitignore                  //  git 忽略项├── index.html                  //  html模板└── package.json                //  package.json

页面路由

全局配置

首先,我们看一下项目的配置文件 /src/main.js 里面的初始内容如下:

import Vue from 'vue'import App from './App'import './styles/index.scss'import {post} from './utils/request.js'Vue.prototype.$post = postVue.config.productionTip = falseApp.mpType = 'app'const app = new Vue(App)app.$mount()export default {    // 这个字段走 app.json    config: {        // 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去        pages: ['pages/about/main', '^pages/index/main', 'pages/product/main', 'pages/news/main','pages/shownews/main','pages/showproduct/main'],        window: {            backgroundTextStyle: 'light',            navigationBarBackgroundColor: '#fff',            navigationBarTitleText: '米拓官网',            navigationBarTextStyle: 'black'        },        tabBar: {            list: [{                pagePath: 'pages/index/main',                text: "首页",                iconPath: 'assets/home.png',                selectedIconPath: 'assets/home-active.png'            }, {                pagePath: 'pages/product/main',                text: "产品",                iconPath: 'assets/product.png',                selectedIconPath: 'assets/product-active.png'            }, {                pagePath: 'pages/news/main',                text: "新闻",                iconPath: 'assets/news.png',                selectedIconPath: 'assets/news-active.png'            }, {                pagePath: 'pages/about/main',                text: "简介",                iconPath: 'assets/about.png',                selectedIconPath: 'assets/about-active.png'            }]        },        networkTimeout: {            request: 10000,            downloadFile: 10000        },    }}

这里的 config 字段下面的内容,就是整个小程序的全局配置了,其中pages是页面的路由,window则是页面的一些配置(大部分都是顶部栏的配置),这些配置,最终都会被打包到原生小程序的app.json,对这些配置不了解的,建议看一下,这里不做赘述。

页面配置

页面结构

本项目共有6个页面,分别为:

├── pages                            // 页面文件│   ├── about                        //  简介页  │   ├── index                        //  首页│   ├── news                         //  新闻列表页│   ├── product                      //  产品列表页│   ├── shownews                     //  新闻详情页│   ├── showproduct                  //  产品详情页

新增页面

复制任意/pages/下的文件夹,重命名,在/src/main.jsconfig.pages字段里添加你新增的页面路径,如:

  1. 新增了页面pages/abc
  2. 然后在/src/main.js下的config.pages字段中新增'pages/abc/main'
Tips : 新增页面文件夹里必须包含
main.js,新增完页面后重启运行
npm run dev

页面跳转

  1. 用小程序原生的 组件,比如我们想从列表页跳到详情页面:<navigator url="../../pages/shownews/main"></navigator>,只需在url处填写详情页面main.js相对于当前页面的路径即可。
  2. 元素绑定tap事件,执行 方法。

样式

样式编写采用了

全局样式

全局样式文件存放于/src/styles/

/src/main.js中通过import './styles/index.scss'被全局引入

├── styles                             //  公共样式文件 │   ├── common.scss                    //  公共样式 │   ├── index.scss                     //  全局样式 │   ├── mixin.scss                     //  混合器 │   ├── varable.scss                   //  变量

页面样式

由于页面大多是由组件组成,所以一个页面的样式被分散到各个组件。如:

src/components/IndexAbout.vue中的

影响了index页面的about区块的样式。

其中lang="scss"规定编译器按照何种语法来解释css语言,这里我们是用的scss。
scoped表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。

Tips : 对于高复用的公共组件谨慎使用
scoped属性

组件

前面我们说到页面大多都是组件组成,在src/components/下存放了项目所有组件。

├── components                           //  全部组件 │   ├── index                            //  首页组件 │   │   ├──IndexAbout.vue                //  简介│   │   ├──IndexNews.vue                 //  新闻 │   │   ├──IndexProduct.vue              //  产品 │   │   ├──IndexService.vue              //  服务 │   ├── inside                           //  内页组件 │   │   ├──News.vue                      //  新闻列表│   │   ├──Product.vue                   //  产品列表 │   │   ├──ShowNews.vue                  //  新闻详情页 │   │   ├──ShowProduct.vue               //  产品详情页 │   ├── common                           //  公共组件 │   │   ├──Banner.vue                    //  轮播图 │   │   ├──Sidebar.vue                   //  侧边栏│   │   ├──SubcolumnNav.vue              //  二级栏目导航

组件新建与引入

vue 组件

由于mpvue只能使用单文件组件(.vue 组件)的形式进行支持,所以我们只能新建单文件的组件。

1.新建文件,命名采用 PascalCase (驼峰式命名),如:HelloWorld.vue,
2.在页面引入你的组件:

import HelloWorld from '@/components/xxx/HelloWorld'`  //引入组件components: {        HelloWorld                                     //组件注册  }

3.在字符串模版中使用<hello-world></hello-world>

Tips :
@
webpack
alias,指向
src,目的是让后续引用的地方减少路径的复杂度

小程序组件

mpvue 可以支持小程序的原生组件,比如: picker,map 等,需要注意的是原生组件上的事件绑定,需要以 vue 的事件绑定语法来绑定,如 bindchange="eventName" 事件,需要写成 @change="eventName"

示例代码:

当前选择: {
{date}}

网络请求

由于微信的限制,小程序发起请求必须通过 方法,这里我们进行了Promise的封装。

1.新建request.js

let serverPath = 'http://www.abc.com/api/'export function post(url,body) {    return new Promise((resolve,reject) => {        wx.request({              url: serverPath + url,    // 拼接完整的url              data: body,              method:'POST',              header: {                  'content-type': 'application/json'              },              success(res) {                resolve(res.data)  // 把返回的数据传出去              },              fail(ret) {                reject(ret)   // 把错误信息传出去              }            })    })}

2.在src/main.js中全局引入,并挂在到Vue原型上。

import {post} from './utils/request.js'Vue.prototype.$post = post

3.在其他地方通过this.$post`调用,如:

this.$post('getUserinfo',data)

转载地址:http://quzdx.baihongyu.com/

你可能感兴趣的文章
联想2017TechWorld大会举行 联想未来瞄准AI
查看>>
出国就医不用慌,日本推出“医用语音翻译系统”
查看>>
ansible常用模块详解
查看>>
开启人工智能新时代,首款神经网络处理器“寒武纪”即将上市
查看>>
大神解答:如何实现域账号免登陆流程平台的功能
查看>>
干货|全面分析GAN,以及如何用TF实现GAN?
查看>>
cas4.2.7实现单点登录
查看>>
Win7下Python2.7配置
查看>>
C#程序结构
查看>>
【Android手机游戏】贪吃蛇(1)
查看>>
解决IP地址冲突的方法--DHCP SNOOPING
查看>>
How to Detect and Respond to Malware-Free Intrusions
查看>>
Office动画技巧集锦
查看>>
网站提速-缓存技术(5)
查看>>
java多线程 -- 线程池
查看>>
路由器基础知识与术语
查看>>
Android开发学习笔记:Activity的生命周期浅析
查看>>
对"查看进程使用的端口"工具小析
查看>>
SQL Server 打造完整的数据备份体系
查看>>
自动平衡二叉树的构建-AVL树
查看>>