从0开始用uniApp搭建一个小程序

最近新建了⼀个⽐较简单的⼩程序，记录⼀下从0开始⽤uniApp搭建⼀个⼩程序1. 新建项⽬

使⽤HBuilderX，⽂件--新建--项⽬，选择uni-app，模板我选择是是默认模板。可根据⾃⼰业务不同选择不同的模板。

这是⽣成的模板的结构

2. 完善模板结构

2.1 不⼀定需要nodeModules，因为没⽤webpack所以如果需要的话需要⾃⼰⼿动添加，这个项⽬没⽤到所以我不添加了。引⼊npm包的⽅法：

2.2 添加api/colorui/static/utils/components等⽂件夹

api：存放接⼝⽂件colorui：⼩程序组件库pages：模块static：静态⽂件utils：⼯具类

2.3 封装的⽅法

⾸先封装好utils>request.js，将他暴露出去（截取了⼀部分）

在api/xx.js⽂件内引⼊暴露出来的封装好的axios，再封装好接⼝并暴露

2.4 引⼊colorui官⽹下载好包

解压后将colorui⽂件粘贴到⽂档⽬录下，和pages同级！

⽼规矩，main.js⾥引⼊

App.vue⾥引⼊

3 ⼯具设置

配置⼩程序APPID，点击manifest.json获取⼩程序APPID⽅式：登陆

4. ⼩程序需要和公众号关联，没有的话需要申请⼀个。

5.引⼊VUEX

uniApp内置vuex，所以直接使⽤即可。main.js引⼊

import store from './store'Vue.prototype.$store = store;

在根⽬录下创建⼀个store⽂件夹，然后创建⼀个叫index.js的⽂件和modules⽂件夹，如下图：

index.js按需引⼊

import Vue from ‘vue’

import Vuex from ‘vuex’ Vue.use(Vuex)

const store = new Vuex store ({ state: { name: ‘’ },

getters: { },

mutations: {

},

actions: { } })

export default store

在main.js⾥引⼊import Vue from 'vue'import App from './App'import store from './store'Vue.prototype.$store = store;

然后在页⾯调⽤测试⼀下：