目录

1.微信小程序项目构建

  1. vue init mpvue/mpvue-quickstart wxprogram
  2. cd wxprogram,npm install

  3. 要看到小程序的运行结果，需要借助微信开发者工具

    需要注意的是，需要运行npm run dev的同时，点击开发者工具上的编译，项目才会更新，偶尔开发者工具上编译出来的dist文件会与编辑器上的不一致，这时候只能手动删除dist文件重新编译一次； 并且每新增一个小程序页面，需要重启npm run dev，否则开发者工具上的小程序不会出现新页面

  4. 项目上线时，运行npm run build即可，再通过开发者工具点击上传按钮，配合微信管理后台发布

2.项目结构

+-- package.json
+-- project.config.json
+-- src
|   +-- components
|   +-- pages
|   +-- sass
|   +-- utils
|   +-- App.vue
|   +-- app.json
|   +-- main.js
+-- static
|   +-- js
|   +-- img
+-- config
|   +-- index.js
|   +-- dev.env.js
|   +-- prod.env.js
+-- build

3.内容重置

  1. 删掉src/components、src/pages、src/utils三个目录下的所有代码文件

  2. 内容重置
    · 将src/App.vue文件中的内容重置成：

    src/App.vue 
    1
    2
    3
    4
    5
    6
    		 
    <script>
export default {}
</script>

<style>
</style>

    · 将src/main.js文件中的内容重置成：

    src/main.js 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    		 
    import Vue from 'vue'
    import App from './App'

    Vue.config.productionTip = false
    App.mpType = 'app'

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

    export default {
      config: {
        pages: [],
        window: {
          backgroundTextStyle: 'light',
          navigationBarBackgroundColor: '#fff',
          navigationBarTitleText: '小程序标题名称',
          navigationBarTextStyle: 'black'
        }
      }
    }

4.安装sass

· npm install -D node-sass sass-loader

· 指定css语言

demo.vue 
1
 
<style scoped lang="scss"></style>

· 微信小程序中有自己的单位rpx，一般375px宽的设计稿，1px就对应2rpx。所以可以写一个函数：

src/sass/function.scss 
1
2
3
 
@function rpx($px){
    @return $px * 2rpx; 
}

在引用时，可以直接@import "../../sass/function.scss";

5.项目结构解析

· App.vue组件被src/main.js引入并被设置了一个mpType的属性值，其值为app。这个值是为了与小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值。引入这个App.vue组件后，会用它作为参数来创建一个Vue的实例，并调用$mount()方法加载。

· 每个页面单独建一个文件夹，并在文件夹下新建2个文件：一个用于实现页面主体功能的index.vue组件，另一个则用于将这个页面组件生成Vue实例并加载的main.js。如果需要对页面单独设置标题等属性，可再新建一个main.json。

src/page/user/main.js 
1
2
3
4
5
 
import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()
src/page/user/main.json 
1
2
3
 
{
  "navigationBarTitleText": "单独设置页面标题"
}

· 每次新建一个页面文件时，需要在app.json文件内将路径添加进pages里，例如"pages":["pages/user/main"],然后重新运行npm run dev。这时才能在开发者工具里看到新的页面。

· app.json配置文件中pages数组里的第一个page路径会被当做是首页。或者在路径前加上^符号，就可以指定首页路径。