微信小程序开发笔记

爱被打了一巴掌 2023-06-21 10:21 13阅读 0赞

# 微信小程序 #

## 框架 ##

### Wepy ###

#### [自定义组件][Link 1] ####

*  [实例写法][Link 2]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70]
 *  [高级用法][Link 1]
    
     *  组件传值
        
         *  动态传值  
            ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 1]
         *  静态传值  
            ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 2]
         *  
     *  组件加载时机  
        之前一直认为，组件是在页面写入组件标签时才开始触发加载。今天在看控制台日志的时候，***发现即使没写组件标签，只要components注册了该组件，也会触发组件加载***。官方文档如下：  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 3]
     *  组件生命周期  
        如果在使用wepy框架开发小程序时，组件生命周期只支持[OnLoad][]，与小程序原生生命周期不一样，这里一定要注意。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 4]
     *  循环渲染
    
    > 当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签，代码如下：
    
        /** project └── src ├── components | └── child.wpy ├── pages | ├── index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy log 页面配置、结构、样式、逻辑 └──app.wpy 小程序配置项（全局样式配置、声明钩子等） **/
        
        // index.wpy
        
        <template>
            
            <repeat for="{ {list}}" key="index" index="index" item="item">
                
                <child :item="item"></child>
            </repeat>
        </template>
        
        <script>
            import wepy from 'wepy';
            // 引入child组件文件
            import Child from '../components/child';
        
            export default class Index extends wepy.page { 
                components = { 
                    // 声明页面中要使用到的Child组件的ID为child
                    child: Child
                }
        
                data = { 
                    list: [{ id: 1, title: 'title1'}, { id: 2, title: 'title2'}]
                }
            }
        </script>
    
    > 需要注意的是WePY 1.x 版本中，组件使用的是静态编译组件，即组件是在编译阶段编译进页面的，每个组件都是唯一的一个实例，目前只提供简单的 repeat 支持。***不支持在 repeat 的组件中去使用 props, computed, watch 等等特性***

#### [功能特性][Link 3] ####

*  支持加载外部NPM包  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 5]  
    疑问：对这句话一开始一直模棱两可，只知道在wpy的标签中，可以直接import项目node\_modules文件下的模块，而且不用写路径，直接写模块名称即可，而且不用写require，直接写import即可。比如在声明一个wepy页面时，我们需要引入wepy模块，只需要`import wepy from 'wepy'`。  
    原因：wepy在编译时，采用的是Babel进行编译，会将import转换成require，如下图  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 6]  
    这是目录dist\\pages\\home下的一个页面编译后的文件，import被转换成了require。个人认为腾讯wepy说明文档不应该直接说会递归遍历代码中的require，而是应该编译之后代码中的require，这样子会更准确些。
 *

## 原生 ##

### 自定义组件 ###

*  https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html
 *  https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
 *  组件生命周期
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 8]

### [样式][Link 4] ###

*  样式导入  
    路径要填相对路径![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 9]
 *  [全局样式与局部样式][Link 4]  
    ![在这里插入图片描述][20191218113113568.png]  
    需要注意的是，这里只说了app和page之间的样式关系，但没有说页面和组件样式的关系，页面和组件的样式关系如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 10]
 *

### [布局][Link 5] ###

### [事件][Link 6] ###

![在这里插入图片描述][20191217170122322.png]

### [Page][] ###

*  事件处理函数
    
     *  [onShareAppMessage][Page]  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 11]  
        微信目前转发只能通过用户点击按钮的形式进行操作，给开发带来了很多不便。比如你想在点击分享的时候，向分享函数传参，不能直接通过方法名(参数）的形式进行传参，需要借助小程序的事件对象属性dataset进行传参，当然还有其它方式，在这里只描述借助dataset属性，下面给出代码：
        
            <button open-type="share" plain data-mydata="{ {entity}}"></button>
        
            /** * 页面分享 */
            onShareAppMessage(res) { 
              // 来自页面内转发按钮
              if (res.from === 'button') { 
                console.log(res.target.dataset.mydata);
              }else { 
                // 来自页面右上角菜单
            	return { 
            	      title: '自定义转发标题',
            	      path: '/page/user?id=123'
            	}
              }
            }
 *  [页面路由][Link 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 12]  
    需要注意的是，跳转的页面路径一定要记得在全局配置文件app.json的[pages][]属性添加页面路径，否则即使页面路径正确，页面也无法正常跳转，[app.json][]的配置格式如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 13]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 14]
 *

## 异常 ##

*  `[xmldom error] element parse error: Error: invalid attribute::no`  
    在引用子组件时，使用了子组件未定义的属性‘no’
 *

[Link 1]: https://tencent.github.io/wepy/document.html#/?id=%E7%BB%84%E4%BB%B6
[Link 2]: https://tencent.github.io/wepy/document.html#/?id=%E7%BB%84%E4%BB%B6comwpy
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212120256563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191212175427597.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191212180259725.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191213154124740.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[OnLoad]: https://tencent.github.io/wepy/document.html#/?id=page%E9%A1%B5%E9%9D%A2%E5%AE%9E%E4%BE%8B%E5%92%8Ccomponent%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191213154611314.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[Link 3]: https://tencent.github.io/wepy/document.html#/?id=%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD%E7%89%B9%E6%80%A7
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191212113639528.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20191212114811603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191213154405905.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20191213154425743.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[Link 4]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191212142337112.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[20191218113113568.png]: https://img-blog.csdnimg.cn/20191218113113568.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20191218113310380.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[Link 5]: https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a
[Link 6]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
[20191217170122322.png]: https://img-blog.csdnimg.cn/20191217170122322.png
[Page]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onShareAppMessage-Object-object
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191217165733930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[Link 7]: https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191219092950242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[pages]: https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html
[app.json]: https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20191219093303679.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20191219093342610.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RvbmdfY2hs,size_16,color_FFFFFF,t_70