文章目录

• 前言
• 一、大体流程
• • 1.uni-app项目搭建流程：
  • 2.团队开发流程
• 二、遇到的些问题
• • 1.插件的使用
  • • ①使用uni原生ui插件：
    • ②使用SegmentedControl分段器
    • ③使用uViewUI
  • 2.组件之间的传参
  • • ①父子组件间传参
    • • 1.父向子传递参数：
      • 2.子向父传递参数：
    • ②VueX
    • • 1.配置步骤
      • 2.基本用法
      • • state
        • mutations
        • actions
        • getters
    • ③Mixins
  • 3.session_key
  • • ①wx.checkSession()
  • 4.优化项目代码
  • • ①分包
  • 5.实现些功能
  • • ①聊天界面
    • ②平台环境判断
    • ③实现滑动滚动
    • ④实现缓存列表数据
    • ⑤点击按钮 增添DIV
    • ⑥点击按钮 删除DIV
    • ⑦调用接口，传值返回数据
    • ⑦带参跳转页面

---

前言

以前自己只练习过开发些原生微信小程序，改用uni框架试试，简单记录下流程以及遇到的些问题。

---

一、大体流程

1.uni-app项目搭建流程：

（1）先全局安装

npm install -g @vue/cli
（只需要安装一次，安装过后就不用安装了）

PS： 直接npm install -g@vue/cli 安装 可能会报错 问题其实不是webpack的问题。 把nodeJS的版本切换到12或者更低，就OK了.

• 卸载vuecli5.0版本: npm remove -g @vue/cli
• 安装vue4.5.15版本: npm install -g @vue/cli@4.5.15

（2）创建项目

vue create -p dcloudio/uni-preset-vue my-project
（如果已有项目，cd后直接 npm install ）

PS ：npm WARN config global --global, --local are deprecated. Use `–location
解决方案：

• 找到目录：打开nodejs，并打开要修改的2个配置文件（npm.cmd 和 npm）

• 进行修改：将prefix -g替换为prefix --location=global

• 检验问题：输入npm-v

（3）进入项目里

cd my-project

（4) 需要的话 先安装sass依赖

npm install sass-loader node-sass

安装后style标签中加入属性 < style lang = “scss” >

（5）运行项目

npm run dev:mp-weixin

（6）打开微信开发者工具 导入项目myproject—>dist—>dev—>mp-weixin

2.团队开发流程

（1）打开DCH，建立个人分支
（2）将项目导入到本地
（3）建立连接 打开VScode编译 同步个人分支
（4）提交代码后，打开Git Extensions 进行Push

二、遇到的些问题

1.插件的使用

①使用uni原生ui插件：

（1）项目搭建完，先安装sass 及 sass-loader

• npm i sass -D
• npm i sass-loader@10.1.1 -D

（2）安装uni-ui

npm install @dcloudio/uni-ui

（3）在script中引用和注册组件

<script>
   import  {uniBadge}  from  '@dcloudio/uni-ui'
   export default  {
				components:   {uniBadge}
   }
</script>

（现在更多用uni_modules直接导入 会更加方便，详情见 uniapp：uni_modules组件开发与发布）
（4）在 template 中使用组件：

<template>
<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>
</template>

②使用SegmentedControl分段器

（1）SegmentedControl分段器也是Cloud团队开发的，先进行安装uni-ui（见①）
（2）然后打开插件市场，搜索你需要的插件,找到插件文档说明，比如uni-segmented-control插件文档
（3）迁移代码后，记得引用和注册组件。
代码片段示例：

<template>
    <view>
        <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
        <view class="content">
            <view v-show="current === 0">
                选项卡1的内容
            </view>
            <view v-show="current === 1">
                选项卡2的内容
            </view>
            <view v-show="current === 2">
                选项卡3的内容
            </view>
        </view>
    </view>
</template>

<script>
//引用和注册组件
import { uniSegmentedControl } from '@dcloudio/uni-ui'
export default {
	components: { uniSegmentedControl },

	data() {
		return {
			items: ['选项1', '选项2', '选项3'],
			current: 0
		};
	},
	methods: {
		onClickItem(e) {
			if (this.current != e.currentIndex) {
				this.current = e.currentIndex;
			}
		}
	}
}
</script>

③使用uViewUI

官方文档
实例项目

1.npm安装

• npm init -y //根目录没有package.json时执行
• npm install uview-ui //安装
• npm update uview-ui //更新

2.main.js引入uView库

import uView from 'uview-ui' ;
Vue.use(uView);

3.安装sass
4.App.vue引入样式

<style lang = "scss" >
@import "uview-ui/index.scss";
</style>

5.uni.scss引入全局scss变量文件

@import "uview-ui/theme.scss";

6.page.json配置easycom规则（按需引入）

//page.json
{
	"easycom":{
			  "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
			  },
	 "pages": [
	          //......
	          ]
}	 

2.组件之间的传参

①父子组件间传参

1.父向子传递参数：

父传子，通过属性方法：

2.子向父传递参数：

子传父，子组件通过触发事件传递，父组件通过监听事件接收

先在子组件内部绑定事件：

在父组件监听：

②VueX

实际上，在组件的mounted钩子函数中就能进行数据的请求，父子组件之间，非父子组件之间进行传值也有一些方法，小型的项目也许这么做没事没问题，但是如果是进行大型项目，非父子之间传值，父子之间传值会出现混乱复杂的情况，如果使用vuex不止能把数据放在全局，组件无论在哪都能反问获取到，并且线路清晰，有利于维护。

vuex是基于vue框架的一个状态管理库。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。
vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。

客户端要请求数据 ==>> 对接actions，在actions中进行axios请求 ==>> 请求过来的数据给mutations进行数据存储 ==>> 数据存在state中 ==>> getters将state中的数据进行返回 ==>> 客户端对接getters接收数据:

1.配置步骤

npm install vuex --save 先安装依赖

1、在项目根目录中创建 store 文件夹，专门用来存放 vuex 相关的模块

2、在 store 目录上鼠标右键，选择 新建 -> js文件，新建 store.js 文件

3、在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象：

// 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: {},
  //State:{},Getter:{},Mutation:{},Action:{}
})

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

4、在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

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

// 省略其它代码...

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

2.基本用法

state

用来存储组件间共享的值

store.js定义：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =  new Vuex.Store({
    state: {
        count: 10,
    }
})
export default store

组件：

<template>
    <block>
        <view>当前最新的count值为: {{count}} </view>
    </block>
</template>
 <script>
    import { mapState } from 'vuex';
export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapState(['count']),
    },
}
</script>

然后主页面正常引入插件就可以了

mutations

只有 mutations 中定义的函数，才有权力修改state值

store.js定义：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =  new Vuex.Store({
    state: {
        count: 10,
    },  
    mutations: {
        sub(state){
            state.count--           
        },
        subN(state,step){
            state.count-=step        
        }
    },
})
export default store

组件:

<template>
    <block>
        <view>当前最新的count值为: {{count}} </view>
        <button @click="btnHandler1">-1</button>
        <!-- <button @click="btnHandler2">-N</button> -->
        <button @click="subN(4)">-N</button>  //可以直接引方法函数名，无需绑点击事件
    </block>
</template>
 <script>
    import { mapState,mapMutations } from 'vuex';
export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapState(['count']),
    },
    methods: {
        ...mapMutations(['sub','subN']),
        btnHandler1(){
            this.sub()
        },
        // btnHandler2(){
        //     this.subN(5)
        // },
    },
}
</script>

actions

异步操作变更数据必须通过Actions，而不能使用Mutations
必须通过 context.commit() 触发某个mutation才行

store.js定义：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =  new Vuex.Store({
    state: {
        count: 10,
    },  
    mutations: {
        sub(state){
            state.count--           
        },
        subN(state,step){
            state.count-=step        
        }
    }, 
    actions: {
         subAsync(context){
            setTimeout(() => {
                context.commit('sub')
            },1000)          //做个延时效果
         }
    },
})
export default store

组件：

<template>
    <block>
        <view>当前最新的count值为: {{count}} </view>
        <button @click="sub">-1</button>
        <button @click="subN(4)">-N</button>
        <button @click="subAsync">-1 Async</button>
    </block>
</template>
 <script>
    import { mapState,mapMutations,mapActions} from 'vuex';
export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapState(['count']),
    },
    methods: {
        ...mapMutations(['sub','subN']),
        ...mapActions(['subAsync']),
    },
}
</script>

getters

用于对Store中的数据进行加工处理形成新的数据,不修改state

store.js定义：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store =  new Vuex.Store({
    state: {
        count: 10,
    },  
    mutations: {
        sub(state){
            state.count--           
        },
        subN(state,step){
            state.count-=step        
        }
    }, 
    actions: {
         subAsync(context){
            setTimeout(() => {
                context.commit('sub')
            },1000)
         }
    },
    getters:{
        showNum: state => {
            return '当前最新数量是【'+ state.count + '】'
        }
    }
})
export default store

组件：

<template>
    <block>
        <view>当前最新的count值为: {{count}} </view>
        <button @click="sub">-1</button>
        <button @click="subN(4)">-N</button>
        <button @click="subAsync">-1 Async</button>
        <view>{{showNum}} </view>
    </block>
</template>
 <script>
    import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
export default {
    data() {
        return {
        }
    },
    computed: {
        ...mapState(['count']),
        ...mapGetters(['showNum']) 
    },
    methods: {
        ...mapMutations(['sub','subN']),
        ...mapActions(['subAsync']),
    },
}
</script>

③Mixins

• 与公共组件的区别
  组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。
  Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

• 与vuex的区别
  vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。
  Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

• 实例文档

3.session_key

功能说明 微信客户端通过wx.getUserInfo()获取用户的信息
后台有时候也需要获取微信客户端的用户信息，因此，就需要利用session_key这个秘钥来从微信平台中获取 [微信官方的链接]

-------> session_key 有什么用？

服务端给你的数据是加密的，如果你想解密就需要就需要sesison_key

--------> 怎么获取session_key ?

客户端通过 wx.login方法获取一个code（5 分钟内有效），把code 发送给自己的服务器，服务器通过另外的接口获取session-key

---------->如果我存储ssessiion-key 在自己的服务器，每次解析数据的时候就可以直接使用啦？

并不是，session-key 会过期。

----------> 那么我第一次登录的时候解析完数据，保存到服务器里，以后就不需要反复获取用户数据，获取sessionkey 并且解析数据啦？

可以，但是有个缺点，你保存的信息，是用户第一次登录时候的信息，如果用户修改了头像之类的，你数据库的信息不能够和微信的保持同步。

----------> 我想要自己的数据是最新的怎么办？

那么就每次进入小程序的时候调用登录接口，获取新的用户数据，获取sessonkey， 解析数据，然后展示数据。

----------->每次都要调用登录接口？

好像是这样，

---------->那么后台也要每次都获取sessionkey吗

不需要，你可以在前端通过checksessionkey 来检查sessionkey 是不是已经过期了，如果没有过期，那么就不需要重新获取。

---------> 每次都登录是不是有点麻烦？

我觉得也是，所以直接获取一次信息就好了，本地存储一个token ，除非用户删除小程序，不然的话，根本不需要登录。

微信登录过程
1.wx.login() 这个方法会返回一个code
2.后台根据 code + appid + appsecret 这个三个参数完成登录的认证，得到微信客户端的openid + session_key

①wx.checkSession()

有时候，我们会因为session_key不正确而导致解密或者校验签名失败。有几方面的原因：

1、因为wx.login()被调用时，用户的session_key会被更新导致就session_key失效。所以，在调用wx.login()的时候应该要明确需要登录之后再调用。

2、另外，微信不会把session_key的有效期告诉我们，用户越频繁使用微信，session_key的有效期就更长。

因为，就需要调用wx.checkSession()来校验当前用户的session_key是否有效。

onLoad: function () {
　　wx.checkSession({
　　　　success: function(res){
　　　　　　console.log("处于登录态");
　　　　},
　　　　fail: function(res){
　　　　　　console.log("需要重新登录");
　　　　　　wx.login({})　　
　　　　}
　　})
}

4.优化项目代码

①分包

请点击该链接，这位博主归纳的很好，如果想加快小程序启动速度，可在pages.json里配置preloadrule

5.实现些功能

①聊天界面

链接1
链接2

②平台环境判断

判断环境：

if(process.env.NODE_ENV === 'development'){
					console.log('开发环境')
					}else{
					console.log('生产环境')
					}

判断平台：

switch(uni.getSystemInfoSync().platform){
  case 'android' :
  		console.log('运行在Android上')
  		break;
  case 'ios' :
  		console.log('运行在IOS上')
  		break;
  default :
  		console.log('运行在开发者工具上')
  		break;
  		}	  		

③实现滑动滚动

<template>
	<scroll-view class="scroll" scroll-x>//1 
		<view class = "group" >
			<view class = "item">测试数据</view>
			<view class = "item">测试数据</view>
			...
		</view>
	</scroll-view>
</template>

<style lang = "scss">
.scroll{
	border:1px solid red;
	box-sizing: border-box;             //2
	.group{
		  white-space: nowrap;          //3
		  .item{
			    width: 220rpx;
			    height: 220rpx;
			    background: bule;
			    display: inline-block;  //4
			    margin-right: 10rpx;
			   }
		  }
	    }
}
</style>

概念文档：1 2 3 4

④实现缓存列表数据

页面的缓存，我们需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。
从A页面跳转到B页面，返回A页面时 不会重新加载A页面数据
1.在路由选项中，router文件里配置meta属性

//router index.js path: '/pageA',
meta: {
        keepAlive:true  //添加作为标志符，表明该页面需要保留状态
        // isBack: false      //标示页面是否是从articleDetail页面返回的
      }

2.设置beforeRouteEnter判断从哪跳转的 如果是从详情页跳转的，则将当前路由对象的meta.isBack 设置为true,否则设为false

export default {
  data() {
    },
   // beforeRouteEnter(to, from, next) {
  //   if (from.path == "/pageB") {
  //     to.meta.isBack = true;
  //   } else {
  //   to.meta.isBack = false;
  //   }
  //   next();
  // },
  beforeRouteLeave(to,from,next){
      to.meta.keepAlive = true
      next(0)
    },
  }

3.为了在其他页面进入时，更新页面中的列表数据，我们将在activated钩子函数中挂载页面初次进入时的请求数据

//  activated() {
//  if (!this.$route.meta.isBack) {
//   this.List = [];
//   this.pageNum = 1;
//   this.getList();
//  }
//   this.$route.meta.isBack = false;
//  },

4.记得在App.vue声明一下

<keep-alive include="pageA">
      <router-view/>
</keep-alive>

⑤点击按钮 增添DIV

之前用innerhtml转义 那个办法挺笨的 有的判断无法识别 改为这种

⑥点击按钮 删除DIV

删除我参考的这个

⑦调用接口，传值返回数据

传入v.fourMCode返回后，赋值给res，再加入要使用的对象数组

let res = await this.$axiox.get('/api/ProMats/query/fourMCode?fourMCode=' + v.fourMCode, null, false)
      console.log(res.data)
      this.fourmList[i] = res.data

let res = await this.$axiox.post('/api/Content/checkDocumentVersion', this.fourMCodeList[i].fourthMCodeDocuments, 0)
      console.log('检查版本号', res.data)

如果是接手别人的项目。格式一般都看axios.js里是如何声明的
参考这篇文档

⑦带参跳转页面

传值：

 window.location.href = 'Url?id=' + 值   //在当前页面刷新
 window.open('Url?id=' + 值)            //另开新页面

接收：

    if(this.$commonJs.getHrefName('id')){
      接收参数 = this.$commonJs.getHrefName('id') // 接收传来的值
    }

调用common.js文件里的一个方法

// 获取指定querystring的值
  getHrefName(name) {
    let href = window.location.href.split('?')[1] || ''
    let hrefArray = href.split('&')
    for (let i = 0; i < hrefArray.length; i++) {
      if (name === hrefArray[i].split('=')[0]) {
        return hrefArray[i].split('=')[1]
      }
    }
  },