從0開始用uniApp搭建一個小程序

最近新建了一個比較簡單的小程序，記錄一下從0開始用uniApp搭建一個小程序

1. 新建項目

使用HBuilderX，文件--新建--項目，選擇uni-app，模板我選擇是是默認模板。可根據自己業務不同選擇不同的模板。

 

 

這是生成的模板的結構

 

 

 

 

2. 完善模板結構

2.1 不一定需要nodeModules，因為沒用webpack所以如果需要的話需要自己手動添加，這個項目沒用到所以我不添加了。

引入npm包的方法：https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

2.2 添加api/colorui/static/utils/components等文件夾

 

api：存放接口文件

colorui：小程序組件庫

pages：模塊

static：靜態文件

utils：工具類

 

2.3 封裝的方法

首先封裝好utils>request.js，將他暴露出去（截取了一部分）

 

 在api/xx.js文件內引入暴露出來的封裝好的axios，再封裝好接口並暴露

 

 2.4 引入colorui

官網下載好包https://www.color-ui.com/

解壓后將colorui文件粘貼到文檔目錄下，和pages同級！

 

 

 老規矩，main.js里引入

 

 

 App.vue里引入

 

 

 

 

3 工具設置

 配置小程序APPID，點擊manifest.json

獲取小程序APPID方式：登陸https://mp.weixin.qq.com/

 

 

 

 

 

 

 

 

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; 

　

然后在頁面調用測試一下：