uinapp 开发笔记

小程序

1、 全局安装脚手架  打开cmd   或者vscode调出终端

npm install -g @vue/cli

 

2、创建项目，my-project为项目名 （注意选择硬盘位置创建）

//dcloudio/uni-preset-vue 表示创建uni-app项目

//dcloudio/uni-preset-vue 表示创建uni-app项目
vue create -p dcloudio/uni-preset-vue my-project

 

3、若出现如下问题：

 

4、切换到my-project路径

cd my-project

5、启动项目（微信小程序）

npm run dev:mp-weixin

6、下载安装微信开发者工具
点击项目->导入项目->选择刚创建的文件

 

7、运行项目，出现如下结果则成功进行监听了，vsCode编辑完后记得保存，才可以实时查看结果

 

8、样式 和sass

小程序中的单位 rpx   750rpx=屏幕宽度

H5单位 vw/vh  100vw=屏幕宽度 100vh=屏幕高度

使用内置sass  1安装依赖 npm install sass-loader node-sass

安装node失败

 

解决方案：npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

 

在vue组件中 style标签上加如属性lang=”scss” 如<style lang=’scss’>

注意：sass-loader的版本是否过高报错

解决解决方案：
安装旧版本loader
npm uninstall sass-loader（卸载当前版本）
npm install sass-loader@7.3.1 --save-dev

9、当出现如下这种情况时建议使用computer计算属性

 

 

改成：

 

 

10、事件

定义事件监听函数需要在 methods 中定义

11组件

11-1 父组件向子组件传参

 

11-2子组件传值给父组件

 

 

 

11-3 全局共享数据

1. 通过vue的原型来实现

Vue.prototype.baseUrl=”www.baidu.com”

只要找到有调用vue的地方添加即可

如：

其他地方就可以通过 this. baseUrl 获取值

1. getApp().globalData.text=”test”

要在App.vue中加globalData对象

 

其他地方就可以通过 getApp().globalData.text获取值; getApp().onHide() 调用全局方法

11-4 组件插槽

父组件给子组件传递标签 使用插槽slot

 

12 生命周期

onLaunch 全局app中使用 表示应用启动时

onload 页面中使用 表示页面加载完毕时

onShow/onHide 页面中使用 表示页面显示时/页面隐藏时 主意不能在组建中使用

mounted 组件中使用 表示组件挂载完毕时

onLaunch 在app.vue中使用

 

 

 

 

v-if 和v-for 不时使用

1、不建议使用

<el-step

              v-show="index == item.superviseList.length - 1"

              v-for="(item1, index) in item.superviseList"

              :key="'sup' + index"

              :title="item1.finishDate"

              :description="item1.deptName + ' ' + item1.finishMan"

            ></el-step>

 

2 建议使用

<el-step

              v-for="(item1, index) in item.feedbackList.slice(

                item.feedbackList.length - 1

              )"

              :key="'supD' + index"

              :title="item1.finishDate"

              :description="item1.deptName + ' ' + item1.finishMan"

            ></el-step>