前言
以前自己只练习过开发些原生微信小程序,改用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]
}
}
},
⑨Vue 实例重新渲染
$forceUpdate很好用,注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
this.$forceUpdate()
好点的办法用$set:接收3个参数,参数1:参数是需要更新的数组或对象,参数2:是数组的下标或者对象的属性名,参数3:是更新的内容
- $set用于更新数组:
let arr = ["星期一","星期二","星期日"]
this.$set(arr,2,"星期三") //第一个参数是数组,第二个参数是下标索引,第三个参数是新的内容
//更新之后的arr是["星期一","星期二","星期三"]
- $set用于更新对象:
//对象的属性sex的值更新为"男"
let obj = {name:"六四",age:18,sex:"女"}
this.$set(obj,"sex","男") //第一个参数是对象,第二个参数是更新的属性名称,第三个参数是新的内容
//更新之后的obj是 {name:"六四",age:18,sex:"男"}
⑩ios端首次进入单次刷新页面
记录个小demo
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){
if (!window.sessionStorage.getItem('isReloaded')) {
window.sessionStorage.setItem('isReloaded', true)
window.location.reload()
}else {
window.sessionStorage.removeItem('isReloaded')
}
}
⑪截取后端str字段
1.splice改变原数组,slice不改变原数组,一般截取后端的数据用slice方法
2.split() 方法用于把一个字符串分割成字符串数组。str.split(separator,limit) separator:从该参数指定的地方分割 string Object;limit:限制长度,可不传。
str=‘How are you doing today’
1.截取str前十位
str.slice(0,10) //How are yo
2.截取str后十位
str.slice(-10) //oing today
3.分割str取值文章来源:https://www.toymoban.com/news/detail-492281.html
str.split('you')[0]; //How are
str.split('you')[1]; //doing today
⑫处理移动端底部小黑条问题
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
⑫原型链
每个JavaScript对象都有一个指向其原型对象的引用,这个引用保存在对象的__proto__属性中。如果在对象上访问一个属性或方法,而该对象本身没有定义这个属性或方法,JavaScript会沿着原型链向上查找,直到找到对象的原型对象,或者一直到达Object.prototype为止。这样,对象可以继承原型对象的属性和方法。
__ proto__ = Vue.prototype文章来源地址https://www.toymoban.com/news/detail-492281.html
- __proto__属性:
__proto__是每个JavaScript对象都拥有的属性,它指向对象的原型对象。通过__proto__属性,可以访问和修改对象的原型链。虽然它在一些现代JavaScript环境中被标记为不推荐使用,但它仍然是理解原型链机制的关键部分。 - Vue.prototype:
Vue.prototype是Vue.js框架中的一个重要概念。在Vue.js中,每个Vue实例都通过原型链继承了一个共享的原型对象,该原型对象存储了Vue.js的核心功能和方法,如 d a t a 、 data、 data、props、$watch等。这意味着你可以在所有Vue实例中共享这些功能。通常,开发者可以通过Vue.prototype来自定义或扩展Vue实例的原型,以添加自定义方法或属性。这是Vue.js实现组件化和扩展的重要机制之一。
到了这里,关于【用vue开发微信小程序】(uni-app)(自用,不推荐参考)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!