微信小程序框架快速入门指南

更新时间：2019年5月15日14:16:04 作者：七马行天下

它是一个使用Vue.js开发小程序的前端框架。本文主要介绍小程序的框架。有需要的朋友可以参考一下。

1.什么是框架？

它是一个使用Vue.js开发小程序的前端框架。该框架基于Vue.js核心（所以建议在使用该框架之前先熟练掌握Vue，否则建议使用原生框架来编写小程序），Vue.js的实现已经修改为可以在小程序环境中运行，从而提供小程序开发引入整个Vue.js开发体验。

2、必要的发展基础

① 精通vue.js（如果你没有使用过vue框架，建议学习一下vue的官方文档：）

②微信开发者工具（该工具是开发、调试和模拟运行微信小程序的核心工具，下载地址：）

③ Code（一个轻量级的代码编辑器，有很多好用的辅助开发插件，下载地址：）

④node.js（现在前端工具链基本依赖Node.js，下载地址：）

⑤ vue-cli（vue专用项目脚手架工具，打开cmd，输入命令：npm --vue-cli）

3.初始化项目

1.打开cmd，快捷键win+R；

2、检查node.js是否安装成功，输入命令：

节点-v

出现版本号表示成功；

3、检查vue-cli是否安装成功，输入命令：

vue-V

出现版本号表示成功；

4、然后我们执行以下命令，将npm下载源切换到国内淘宝镜像，以提高下载速度和成功率；

npm 设置

5、进入要保存项目的文件夹（比如d盘，先输入命令d:），基于-创建一个新项目：

vue 初始化 /-

然后我们选择或者填写项目的配置信息。如果不知道就按回车即可（依次是项目名称、小程序、项目介绍、作者，然后是是否安装vuex等，如果要安装就写yes，否则就no）

这时候就可以在d盘看到一个工程文件了。

6、别着急，我们现在进入这个文件夹，输入命令：

光盘

7、然后，我们安装依赖库，输入命令：

新项目管理

8、安装完成后我们来运行一下，输入命令：

npm 运行开发

操作成功后，可以看到本地多了一个dist目录。该目录包含生成的相关代码。此时我们已经成功初始化了项目。开始跑步...

4.运行并查看项目

打开微信网页开发者工具，选择新建项目，打开我们刚刚创建的项目，如图：

点击“确定”按钮，进入小程序开发主界面。在左侧小程序模拟器中可以看到小程序的执行结果：

5. 编写代码

如上所示，我们新创建的项目已经生成了一个默认页面。现在我们将其全部删除，如下所示：

1、删除src/、src/、src/目录下的所有代码文件；

2.将src/App.vue文件的内容重置为：

3. 将 src/main.js 文件的内容重置为：

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: [ '^pages/login/main' ], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', navigationBarTitleText: '我的小程序', navigationBarTextStyle: 'black' } } }

现在，我们的代码已经变成了连小程序页面都没有的初始状态。

4. 创建一个新页面。未来的每个页面组件都将具有如下图所示的结构。

页面写法如下：

.vue：

main.js：

import Vue from 'vue' import App from './login' const app = new Vue(App) app.$mount() export default { config: { // 注意，页面级可配置属性相当于只是`src/main.js`中配置里的`window`部分 "navigationBarBackgroundColor": "#3dc1c7", "navigationBarTitleText": "登录", "navigationBarTextStyle": "white" } }

5、当我们在src中使用vue编写创建页面时，会自动创建小程序的页面并进行代码转换。该文件夹是 dist.图片如下：

这样我们就对框架有了初步的了解，有时间再写一个进阶版本。以上内容如有错误，敬请指正，谢谢！

总结

以上就是小编为大家介绍的微信小程序框架的快速入门指南。希望对您有所帮助。如果有什么问题请给我留言，小编会及时回复您！