uniapp开发小程序记录一:配置程序

一、新建项目

1.文件–新建–项目
2.选择uni-app
3.保存到一个英文路径的目录
4.选择内置uni-ui的项目模板
5.创建

二、目录结构

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置小程序的全局样式、生命周期函数等
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路径、页面窗口样式、tabBar、navigationBar 等页面类信息

三、项目运行到微信开发者工具

1.在manifest.json 文件种的微信小程序配置里填写自己的appid
2.在工具-设置里找到运行配置，在微信开发者路径里填写，自己微信开发者的安装路径
3.打开自己的微信开发者工具，在设置-安全中打开服务端口
4.在HBuilderX 中，运行到小程序模拟器 -> 微信开发者工具，即可将当前uni-app项目编译后，自动打开微信开发者工具运行。

四、配置网络请求

小程序不支持axios,而且原生的wx.request()功能较为简单，不支持拦截器等全局定制的功能。所以使用第三方插件来发起网络请求。

1.安装@escook/request-miniprogram

先要初始化npm包管理器

npm init -y

然后安装

npm install @escook/request-miniprogram

2.配置网络请求

在main.js文件中

//导入网络请求的包
import {
      $http } from '@escook/request-miniprogram'
//uni是uni-app的顶级对象
uni.$http= $http;
//请求的根路径
$http.baseUrl = 'http://www.uinav.com'
//请求拦截器
$http.beforeRequest = function(options){
     
  uni.showLoading({
     
    title:"数据加载中"
  })
}
//响应拦截器
$http.afterRequest = function(){
     
  uni.hideLoading()
}

3.发起网络请求

在某个页面中

 const{
     data:res}  =   await uni.$http.get('url')

这样即可发送请求。要是微信开发者工具提示非合法域名，可以在详情-本地设置，不校验合法域名。但只限于开发阶段，要解决须在在后台管理设置。

五、配置小程序分包

1.在项目根文件中，创建一个文件夹用来存放分包，假设名字叫subpkg
2.在pages.json中，page同级节点，创建subPackages节点

"subPackages":[
  {
     
  //root表示根文件是哪个，这里是subpkg文件夹
    "root":"subpkg",
    "pages":[]
  }
],

3.在subpkg文件夹上右键，选择新建页面，输入文件夹的名称，选择scss模板选择小程序的分包是刚才创建的subpkg文件夹。这样就能创建一个分包，并且会把路径自动添加到pages.json文件夹中。

六、新建组件

1.在项目根目录的 components 目录上，鼠标右键，选择 新建组件
2.选择scss模板,创建同名目录,这里目录名写my-searc
3.使用:
再某个页面中

//组件名就是组件文件的名字.直接使用即可
<my-search></my-search>

七、使用uni提供的组件

 <uni-icons type="search" size="17"></uni-icons>

直接使用即可

八、配置vuex

1.在项目根目录中创建 store 文件夹，专门用来存放 vuex
2.在 store 目录上鼠标右键，选择 新建 -> js文件，新建 store.js 文件
3.模板选择default，默认模板
4.初始化sotre的实例对象

// 1. 导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'

// 2. 将 Vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 3. 创建 Store 的实例对象
const store = new Vuex.Store({
     
  // TODO：挂载 store 模块
  modules: {
     },
})

// 4. 向外共享 Store 的实例对象
export default store

5.在main.js导入store实例

// 1. 导入 store 的实例对象
import store from './store/store.js'

// 省略其它代码...

const app = new Vue({
     
  ...App,
  // 2. 将 store 挂载到 Vue 实例上
  store,
})
app.$mount()

6.创建vuex子模块
7.在 store 目录上鼠标右键，选择 新建 -> js文件，创建一个 store子 模块，命名为 demo.js
8.模板选择default模板
9.初始化demo模块

export default {
     
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
     
  //数据
    count: [],
  }),

  // 模块的 mutations 方法
  mutations: {
     },

  // 模块的 getters 属性
  getters: {
     },
}

10.在store/store.js 模块中，导入并挂载demo vuex 模块

import Vue from 'vue'
import Vuex from 'vuex'
// 1. 导入demo的 vuex 模块
import demofrom './demo.js'

Vue.use(Vuex)

const store = new Vuex.Store({
     
  // TODO：挂载 demo模块
  modules: {
     
    // 2. 挂载demo的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
    //    demo模块中 count数组的访问路径是 m_demo/count
    m_cart: moduleCart,
  },
})

export default store

11.在某个页面中使用store中的数据

// 从 vuex 中按需导出 mapState 辅助方法
import {
      mapState } from 'vuex'

export default {
     
  computed: {
     
    // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算属性来使用
    // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
    ...mapState('m_demo', ['count']),
  },
  // 省略其它代码...
}

注意：今后无论映射 mutations 方法，还是 getters 属性，还是 state 中的数据，都需要指定模块的名称，才能进行映射。

12.在页面渲染时，可以直接使用映射过来的数据，例如

<view class="yf"> {
     {
     demo.length}}</view>

13.在demo.js模块中，定义一个mutations 方法

export default {
     
  // 为当前模块开启命名空间
  namespaced: true,

  // 模块的 state 数据
  state: () => ({
     

    count: [],
  }),

  // 模块的 mutations 方法
  mutations: {
     
    addToCount(state, step) {
     
        state.count.push(step?step:1)
        //要是存在
          // 通过 commit 方法，调用 m_demo 命名空间下的 saveToStorage 方法
   this.commit('m_demo/saveToStorage')
  },
  saveToStorage(){
     
  console.log('调用了')
}
  },
  

  // 模块的 getters 属性
  getters: {
     },
}

14.在某页面中使用mutations方法

// 按需导入 mapMutations 这个辅助方法
import {
      mapMutations } from 'vuex'

export default {
     
  methods: {
     
    // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
    ...mapMutations('m_demo', ['addToCount']),
    //使用时直接this.addToCount
  },
}

14.在demo.js定义getters方法

// 模块的 getters 属性
getters: {
     
  
   total(state) {
     
      const c = state.count.length
      return c
   }
}

15.某页面中使用

// 按需导入 mapGetters 这个辅助方法
import {
      mapGetters } from 'vuex'

export default {
     
  computed: {
     
    ...mapGetters('m_demo', ['total']),
    //使用时，直接是this.total
  },
}

九、配置mixins

1.在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 usedemo.js
2.初始化usedemo文件

import {
      mapGetters } from 'vuex'

// 导出一个 mixin 对象
export default {
     
  computed: {
     
    ...mapGetters('m_demo', ['total']),
  },
  onShow() {
     
    // 在页面刚展示的时候调用
    this.setBadge()
  },
  methods: {
     
    setBadge() {
     
    console.log(this.total)
    
       
    },
  },
}

3.使用mixins

// 导入自己封装的 mixin 模块
import usedemo from '@/mixins/usedemo.js'

export default {
     
  // 将 usedemo混入到当前的页面中进行使用，在页面加载时，会自动调用usedemo文件里的代码，相当于对当前页面vue实例的补充。
  mixins: [usedemo],
  // 省略其它代码...
}

十、uni-app发布小程序

1.小程序只有发布后,才能被用户搜索使用
2.开发期间的小程序为了调试,是没有压缩的,不适合直接上线
3.通过小程序的发布能优化小程序的体积,优化小程序,
4.点击HBuilderX 菜单栏上的 发行 -> 小程序-微信(仅适用于uni-app)
5.在弹出框中填写要发布的小程序的名称和AppId之后，点击发行按钮
6.发布编译完成之后，会自动打开一个新的微信开发者工具界面，此时，点击工具栏上的上传按钮
7.填写版本号和项目备注之后，点击上传按钮
8.上传完成之后，会出现提示消息，直接点击确定按钮即可
9.通过微信开发者工具上传的代码，默认处于版本管理的开发版本列表中
10.将 开发版本提交审核 -> 再将 审核通过的版本发布上线，即可实现小程序的发布和上线

十一、uni-app发布Android App

1.点击 HBuilderX 状态栏左侧的未登录按钮，弹出登录的对话框
2.在弹出的登录对话框中，填写账号和密码之后，点击登录即可
3.打开项目根目录中的 manifest.json 配置文件，在基础配置面板中，获取uni-app 应用标识，并填写应用名称
4.切换到 App 图标配置面板，点击浏览按钮，选择合适的图片之后，再点击自动生成所有图标并替换即可
5.点击菜单栏上的 发行 -> 原生 App-云打包
6.勾选打包配置:android(apk包)->使用公共测试证书->打正式包->打包即可
7.点击链接下载 apk 的安装包，并安装到 Android 手机中查看打包的效果。