uinapp 开发笔记

心已赠人 2022-12-10 03:57 64阅读 0赞

小程序

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、若出现如下问题：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70][]

4、切换到my-project路径

cd my-project

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

npm run dev:mp-weixin

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 1][]

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

![20200923211911653.png][]

8、样式 和sass

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

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

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

安装node失败

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 2][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 3][]

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

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

![20200923212042619.png][]

![20200923212054377.png][]

![20200923212108892.png][]

改成：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 5][]

10、事件

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

11组件

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 6][]

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

![20200923212312940.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 7][]

11-3 全局共享数据

1.  通过vue的原型来实现

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

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

如：![20200923212346987.png][]

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

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

要在App.vue中加globalData对象

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 8][]

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

11-4 组件插槽

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

![20200923212427909.png][]

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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70]: /images/20221123/d049458715b04eb4a9abb86413c0ab63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 1]: /images/20221123/0000a8528bd64431994d26e1182ba0c8.png
[20200923211911653.png]: /images/20221123/60faf2b693364c348c2a7ddd82dae6ad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 2]: /images/20221123/34fd670207344cf38f9e4eeafe50088f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 3]: /images/20221123/6e840b84dd7546db959b29b515bdd7a6.png
[20200923212042619.png]: /images/20221123/cb9a00657d3943b39f603d657c455bd1.png
[20200923212054377.png]: /images/20221123/4d194dd4737545b9931307e3a6f6ab81.png
[20200923212108892.png]: /images/20221123/428bd9afaa394cfa900ac70f30d53479.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 4]: /images/20221123/3cfb1f9a65be4330af4b0c93a4d1719b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 5]: /images/20221123/42dbde925bb344cc871e0b4477d64b13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 6]: /images/20221123/19418039530c40faa4782d026fd36012.png
[20200923212312940.png]: /images/20221123/4e69fedadd14459091bb877b0afdb0ab.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 7]: /images/20221123/0ff4ecaf2c134ba19d6698cf08af1670.png
[www.baidu.com]: http://www.baidu.com
[20200923212346987.png]: /images/20221123/30d576ad6c5f45e197d28c214fb08666.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI3MzI5MDk_size_16_color_FFFFFF_t_70 8]: /images/20221123/c13b50b9c21b4be0acf21a00d69ad252.png
[20200923212427909.png]: /images/20221123/e37ea95d6dbc4fb8b1c57db2166f9b20.png