资讯专栏INFORMATION COLUMN

小程序开发

ghnor / 1148人阅读

摘要:开发前准备环境版本微信开发工具最新版最新版文档本项目技术栈基于微信小程序快速开始克隆项目进入项目安装依赖启动构建打开微信开发工具,导入项目目录结构构建相关配置相关打包相关第三方模块源代码全局公用方法所有页面文件业务组件图片字体等静态资源业务

开发前准备 环境:

Node.js LTS版本

微信Web开发工具 最新版

git 最新版

文档:

本项目技术栈基于

ES2016

VueJS

mpvue

微信小程序

快速开始
1.克隆项目

    git clone https://gitee.com/Fntys/met_wx.git

2.进入项目

    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 = post
Vue.config.productionTip = false
App.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字段里添加你新增的页面路径,如:

新增了页面pages/abc

然后在/src/main.js下的config.pages字段中新增"pages/abc/main"

Tips : 新增页面文件夹里必须包含main.js,新增完页面后重启运行npm run dev
页面跳转

用小程序原生的 navigator 组件,比如我们想从列表页跳到详情页面:,只需在url处填写详情页面main.js相对于当前页面的路径即可。

元素绑定tap事件,执行 wx.navigateTo 方法。

样式

样式编写采用了 Scss

全局样式

全局样式文件存放于/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.在字符串模版中使用

Tips : @webpackalias,指向src,目的是让后续引用的地方减少路径的复杂度
小程序组件

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

示例代码:


    
      当前选择: {{date}}
    
网络请求

由于微信的限制,小程序发起请求必须通过 wx.request 方法,这里我们进行了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)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108134.html

相关文章

  • 前端资源系列(3)-微信小程开发资源汇总

    摘要:微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...

    paney129 评论0 收藏0
  • 微信小程开发由0到1开发,快速开发上线

    摘要:首先先注册微信小程序管理一登录微信公众平台二点击立即注册。注意这里不要用微信公众号登录,小程序账号和微信公众号是不同的。最好从项目直接入手,这里有微信小程序个例子,链接密码有可能会过期,留言或者加我,给你最新的 首先先注册微信小程序管理 一、登录微信公众平台https://mp.weixin.qq.com 二、点击立即注册。 注意:这里不要用微信公众号登录,小程序账号和微信公众号是不...

    seal_de 评论0 收藏0
  • 微信小程开发由0到1开发,快速开发上线

    摘要:首先先注册微信小程序管理一登录微信公众平台二点击立即注册。注意这里不要用微信公众号登录,小程序账号和微信公众号是不同的。最好从项目直接入手,这里有微信小程序个例子,链接密码有可能会过期,留言或者加我,给你最新的 首先先注册微信小程序管理 一、登录微信公众平台https://mp.weixin.qq.com 二、点击立即注册。 注意:这里不要用微信公众号登录,小程序账号和微信公众号是不...

    CrazyCodes 评论0 收藏0
  • 微信小程开发由0到1开发,快速开发上线

    摘要:首先先注册微信小程序管理一登录微信公众平台二点击立即注册。注意这里不要用微信公众号登录,小程序账号和微信公众号是不同的。最好从项目直接入手,这里有微信小程序个例子,链接密码有可能会过期,留言或者加我,给你最新的 首先先注册微信小程序管理 一、登录微信公众平台https://mp.weixin.qq.com 二、点击立即注册。 注意:这里不要用微信公众号登录,小程序账号和微信公众号是不...

    wdzgege 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<