一.工具
X
內置相關環境，開箱即用，無需配置
下載App開發版，可開箱即用；如下載標準版，
在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用
安裝地址
注：如果是第一次使用，需要先配置小程序ide的相關路徑，才能運行成功。如下圖，需在輸入框輸入微信開發者工具的安裝路徑。 若不能正常啟動微信開發者工具js開發微信小程序，需要開發者手動啟動，然后將uni-app生成小程序工程的路徑拷貝到微信開發者工具里面，在里面開發，在微信開發者工具里面就可看到實時的效果。
uni-app默認把項目編譯到根目錄的目錄。
小程序： 選擇【uni-app】---默認模板pc：選擇【普通項目】---vue項目（vue cli ）后臺管理系統：選擇【uni-app】---uni-admin普通頁面（單頁面）：選擇【普通項目】---html項目
uview
安裝步驟
在插件市場搜索uview進行下載點擊使用 X導入插件引入uView主JS庫js開發微信小程序，在項目根目錄中的main.js中，引入并使用uView的JS庫，注意這兩行要放在 Vue之后
// main.js
import uView from "uview-ui";
Vue.use(uView);安裝scss，在HX菜單的 工具->插件安裝中找到"scss/sass編譯"插件進行安裝， 如不生效，重啟HX即可引入uView的全局SCSS主題文件，在項目根目錄的uni.scss中引入此文件。引入uView基礎樣式， 注意：在App.vue中首行的位置引入，注意給style標簽加入lang="scss"屬性配置組件模式，此配置需要在項目根目錄的pages.json中進行
二.框架/語法
介紹：使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺
三.配置
在page.json里面進行配置
pages中的第一個頁面，要出現在配置項中，示例如下：
?"tabBar": {
?? ? ? ? ? ?"color": "#7A7E83",
?? ? ? ? ? ?"selectedColor": "#3cc51f",
?? ? ? ? ? ?"borderStyle": "black",
?? ? ? ? ? ?"backgroundColor": "#ffffff",
?? ? ? ? ? ?"height": "50px",
?? ? ? ? ? ?"fontSize": "10px",
?? ? ? ? ? ?"iconWidth": "24px",
?? ? ? ? ? ?"spacing": "3px",
?? ? ? ? ? ?"list": [{
?? ? ? ? ? ? ? ?"pagePath": "pages/index/index",
?? ? ? ? ? ? ? ?"iconPath": "static/tab/icon_index.png",
?? ? ? ? ? ? ? ?"selectedIconPath": "static/tab/icon_index_sel.png",//跳轉時的圖標
?? ? ? ? ? ? ? ?"text": "首頁"
?? ? ? ? ? ?}, {
?? ? ? ? ? ? ? ?"pagePath": "pages/shop/shop",
?? ? ? ? ? ? ? ?"iconPath": "static/tab/icon_cart.png",
?? ? ? ? ? ? ? ?"selectedIconPath": "static/tab/icon_cart_sel.png",
?? ? ? ? ? ? ? ?"text": "商城"
?? ? ? ? ? ?},
?? ??? ??? ?{
?? ??? ??? ? ? ?"pagePath": "pages/mine/mine",
?? ??? ??? ? ? ?"iconPath": "static/tab/icon_my.png",
?? ??? ??? ? ? ?"selectedIconPath": "static/tab/icon_my_sel.png",
?? ??? ??? ? ? ?"text": "我的"
?? ??? ??? ?}]
?? ? ? ?}工具欄--設置---編輯器配置---啟用px轉rpx的提示跳轉網頁查看設置px轉rpx
需要配置appid
在目錄.json里面的微信小程序配置里面填入appid在微信開發者工具右上角的“詳情”里面基本信息里面填入appid
四.數據接口
步驟如下：
輸入命令:
cnpm install uni-ajax?? ?新建ajax.js
（1）// 引入 uni-ajax 模塊
import ajax from 'uni-ajax'
（2）// 創建請求實例
?const instance = ajax.create({
?? ?// 本地測試地址
?? ?// baseURL: 'http://172.1343.0.101:8080',
?? ?// 線上地址
?? ?baseURL: 'https://gindus34324try.zjyqzg.com/prod-api/',
})
（3） // 添加請求攔截器
? ?instance.interceptors.request.use(
?? ?config => {
?? ??? ?config.header['Authorization'] = 'Bearer ' + uni.getStorageSync("wxUserToken")
?? ??? ?return config
?? ?},
?? ?error => {
?? ??? ?// 對請求錯誤做些什么
?? ??? ?return Promise.reject(error)
?? ?}
)
（4） // 添加響應攔截器
//根據業務添加攔截器，以下的業務情況是：當業務需要登錄以后才可以查看的，后端就會返回狀態碼401，就會跳轉到登錄界面，等登錄以后就會跳回剛剛的頁面，當狀態碼為500時，就代表出錯了，狀態碼為200時，就表示已經成功 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
?instance.interceptors.response.use(
?? ?response => {
?? ??? ?var currentPath = getCurrentPages()[0].$page.fullPath;
?? ??? ?uni.showLoading({
?? ??? ??? ?title: '加載中'
?? ??? ?})
?? ??? ?if (response.data.code == 401) {
?? ??? ??? ?//沒有登錄、沒有拿到用戶數據就跳轉到登錄頁
?? ??? ??? ?uni.navigateTo({
?? ??? ??? ??? ?url:"/pages/home/home"
?? ??? ??? ?})
?? ??? ??? ?
?? ??? ?} else if (response.data.code == 500) {
?? ??? ??? ?uni.$u.toast(response.data.msg);
?? ??? ??? ?uni.hideLoading();
?? ??? ?}
?? ??? ?if (response.data.code == 200) {
?? ??? ??? ?setTimeout(function() {
?? ??? ??? ??? ?uni.hideLoading();
?? ??? ??? ?}, 500);
?? ??? ?}
?? ??? ?// 對響應數據做些什么
?? ??? ?return response.data
?? ?},
?? ?error => {
?? ??? ?// 對響應錯誤做些什么
?? ??? ?return Promise.reject(error)
?? ?}
)
// 導出 create 創建后的實例
export default instance?import App from './App'
import ajax from './common/ajax.js'
// #ifndef VUE3
import Vue from 'vue'
import uView from "uview-ui"
Vue.prototype.$ajax = ajax;
Vue.use(uView);
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
? ? ...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
? const app = createSSRApp(App)
? return {
? ? app
? }
}
// #endif新建api文件夾，示例如下：
?根據頁面以及共用接口進行創建
?// 查詢大賽詳細信息
const matchInfo = '/terminal/applymatchactivity/16';
//下載大賽文檔
const downLoadFile = '/terminal/applymatchactivity/downLoad/16';
export {
?? ?matchInfo,
?? ?downLoadFile,
} ?<script>
?? ?import {matchInfo} from '@/api/match/match';
?? ?export default {
?? ??? ??? ?methods: { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? getInfo() {
? ? ? ? ? ? ?//獲取賽事詳情
?? ? ? ? ? ? ?this.$ajax.get(matchInfo, {}).then(res => {
?? ??? ? ?? ??? ??? ? ? this.info = res.data;}
?? ??? ??? ??? ? ? ?})
?? ??? ??? ?},五.開發者模式
在微信公眾平臺會可以進行添加管理員，就可以進行開發了
六.登錄（后期會有相應的文章板塊）
（微信登錄授權）（手機號）--驗證碼登錄（郵箱、手機號）--密碼登錄
七.常用api
八.頁面
頁面跳轉
地址攜帶參數
九.上傳體驗版
十.常見錯誤
微信小程序 不顯示底部菜單的原因和解決方法
: read ‘‘ of
div設置:fixed或者絕對定位后，click事件失效問題