微信小程序

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、 如何创建项目 1.使用 hbuilerX 创建一个新项目 2.启动项目（微信小程序） 3.微信小程序开发者工具导入项目 （初始界面） 二、 如何编写代码 样式和sass 结构与基本语法 事件 三、 组件 四、 生命周期 常用： 应用生命周期 页面生命周期 总结 前言 首先我们要先了解什么是uni-app ？ （1） uni-app是一个使用Vue.js语法来开发所有前端应用的框架（ 也称之为全端开发框架 ） 技术栈：JavaScript，vue， 微信小程序， uni-app uni-app的线上作品有哪些(列举) 一、 如何创建项目 1.使用 hbuilerX 创建一个新项目 2.启动项目（微信小程序） 3.微信小程序开发者工具导入项目 （初始界面） 项目结构介绍 官方解释 二、 如何编写代码 样式和sass 支持小程序的rpx 和 h5的vw，vh。 rpx 小程序中的单位 750 rpx = 屏幕宽度 vw h5单位 100 vw = 屏幕的宽度， 100 vh = 屏幕的高度 内置sass的配置， 只需要安装对应的依赖即可 npm install sass - loader node - sass vue组件中，在style标签上加入属性 < style lang = 'scss' >

最近负责开发的【广州医保查询】小程序已经发布上线，其中使用web-view组件完成的【在线绑定社保卡】核心流程，遇到了一些坑，现总结如下： 首先，让我们一起看看什么是web-view ？ 小程序api定义： web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。 1# 开发账号一定要是公司类型账号；个人类型和海外类型暂不支持！ 只有公司账号才可以看到业务域名添加入口；且业务域名只支持https，需要备案； 域名格式只支持英文大小写字母、数字及“- ”，不支持IP地址及端口号。 配置前： 配置成功后： 2# 第三方网页以及网页iframe涉及到的所有域名，都要是https,并且要加域名校验； 这里要注意，即使是用来做页面跳转用的过渡域名，也要加域名校验！ 第三方域名校验是我认为使用web-view的开发小程序最大的风险点！ 如果在需求评审阶段，没办法避免使用第三方的开放能力或调用第三方的服务，第一步就要想办法让对方配合做域名校验； 校验成功后，再进入其他流程的开发。 校验注意事项： 保证校验文件有效地放在域名的根目录，比如要对https://www.xxx.968309.com 做校验，那么 就要使得：https://www.xxx.968309.com/校验文件名 是可以被有效访问的！ 校验前： 校验后： 3# web

微信小程序自定义组件 一. 创建自定义组件 类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成 二.组件声明 首先需要在自定义组件所在的 json 文件中进行自定义组件声明 { "component": true } 三.编辑组件 同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式 wxml与xcss和普通页面设置差不多 wxml <!-- 这是自定义组件的内部WXML结构 --> <view class="inner"> {{innerText}} <slot></slot> </view> xcss /* 这里的样式只应用于这个自定义组件 */ .inner { color: red; } js文件设置有点区别 Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 innerText: { type: String, value: 'default value', } }, data: { // 这里是一些组件内部数据 someData: {} }, methods: { // 这里是一个自定义方法,方法必须写在methods内 customMethod: function(){} } }) 四.再使用该组件的组件页面 首先要在页面的 json

大家是否都会有这样的体验： 刚开始用电脑，桌面文件或软件比较少，看着比较整洁干净，让人还挺舒服的。可是随着时间的增长和工作需要等其他原因，于是需要安装一些软件或编写一些文档。而为了下次方便，几乎都是放在桌面，从而桌面文件越来越多，看着密密麻麻，让人很不舒服。 于是，到了后面，大家的桌面就成了这样。 你的桌面是否需要整理成像下面这样干净整洁，让自己工作中心情愉悦呢？ 下面给就大家推荐一款腾讯桌面整理软件。 官方软件介绍：桌面文件太多？找不到文件？通过使用格子，科学的区域划分和文件归类，帮你的桌面变得更整齐、提高你的使用效率。 当你安装好软件后，在桌面空白处右击，即可看到如下四个主要功能： 新建格子、一键桌面整理、壁纸中心、实用功能 。下面对这四个功能简单进行介绍。 新建格子 新建格子主要对文件进行分类整理，同一类文件可以放在同一个格子，方便文件查找与整理。 新建格子 成功新建格子后，可以对格子进行重命名。如果觉得格子太小，可以进行拉伸，方便查看文件。此外，还可对格子进行展开、收起、锁定、解锁、切换显示模式。 展开格子 收起格子 锁定格子 解锁格子 列表显示模式 图标显示模式 一键桌面整理 一键桌面整理可以快速对桌面进行整理，它会自动新建一个名为”我的文件“格子，并把桌面的所有文件（不包括软件）放入该格子中。该功能简单快速实现桌面整理，非常方便使用。 壁纸中心

上一节已经顺利的完成了一个商品列表的展示了，非常开心，但是一个小程序不只有商品展示，还要根据选中的商品跳转至详情页面，并且在详情页面展示该商品的一系列具体信息，那么接下来就开搞。 这里我的步骤如下： 1.列表页面跳转绑定 2.跳转成功后接受参数 3.接受后如何展示详情 1.列表页面跳转绑定 其实做过html页面绑定的肯定都知道按钮onclick事件，就是当鼠标单击后触发的函数。那么由此我就幻想到，是不是小程序也有这样一个类似的事件，找了下资料果然有。 那就是 bindtap 这是相当于onclick事件 上图中，我在区域中绑定了一个函数名:navigateDetail 并且这个区域的数据aid是数组循环当前下标的id字段 接下来看看函数怎么写，这里很简单，和js一样 这样一个简单的传递参数就做好了。 2.跳转成功后接受参数 接下来，看看接收参数怎么做。 很简单的做法，在onload里面接收，接收的对象直接.传递名就能接收成功，然后再赋值给我定义的全局变量。 3.接受后如何展示详情 参数接收成功了，能清楚的了解到，传递过来的是某个商品的唯一标识ID，那么根据微信小程序提供的接口请求方式就可以将ID传递给接口，由接口来做查询并返回对应的json数据。 ![](https://s4.51cto.com/images/blog/202012/04

微信小程序账号与工具 在线文档：https://mp.weixin.qq.com/debug/wxadoc/dev/ 小程序开发者账号注册 微信公众平台：https://mp.weixin.qq.com/ 小程序开发者账号注册：https://mp.weixin.qq.com/wxopen/waregister?action=step1 微信开发者工具 微信开发者工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 微信小程序文件结构 主体文件结构 主体部分由三个文件组成，必须放在项目的根目录，如下： | 文件 | 作用 | [app.js] 　　 小程序逻辑 | [app.json]　　 小程序公共设置 | [app.wxss]　　 小程序公共样式表 | 页面文件结构 页面由四个文件组成，分别是： | 文件类型 | 作用 | [js]　　　　页面逻辑 ( 微信小程序没有window和document对象 ) | [wxml] 　　 页面结构 ( XML语法，不是HTML语法 ) | [wxss]　　 页面样式表 ( **拓展了rpx尺寸单位，微信专属响应式像素** ) | [json]　　 页面配置 ( 不能写注释，否则编译报错 ) | 微信小程序配置 app.json 配置项列表 > `app

微信官方 文档里有提到说hidden是所有组件都有的属性，但我实际编码中发现并不是这样的！！！！ 例如如下布局： <view hidden="true" style="display:flex;flex-direction: row;"> <text>text1</text> <text>text2</text> </view> 你会发现 hidden 没生效。经我实验发现 hidden 元素对块状布局才生效，所以这段代码里导致 hidden 没生效的罪魁祸首是 display:flex 。把这个去掉就可以了。 如果一定要用 flex 布局怎么办？ 其实这里想用 hidden 无非就是想影藏这个布局， display:none 也能做到隐藏。这里可以用一个取巧的方法，动态设置 display 属性，示例如下： <view hidden="true" style="display:{{hideview ? none : flex}};flex-direction: row;"> <text>text1</text> <text>text2</text> </view> 这里的 hideview 是在对应的 js 里是一个变量，由 js 来动态控制。 后话 hidden 隐藏布局，虽然隐藏了，但是还是会占空间。 display:none 隐藏不占据空间。 来源： oschina 链接：

1.公众号样式UI库的下载地址： https://github.com/Tencent/weui 2.微信小程序UI库的下载地址： https://github.com/Tencent/weui-wxss/ 3.微信小程序的官方实例Demo: https://github.com/wechat-miniprogram/miniprogram-demo 4.下载小程序官方示例：（同第3项效果一样）。从官方文档也可以找到下载示例入口。 打开 https://developers.weixin.qq.com/miniprogram/dev/demo.html 找到小程序开发——>简易教程——>体验小程序——>查看小程序实例源码，下载之后，在开发者工具打开，即可。（如下图） 来源： oschina 链接： https://my.oschina.net/u/4417072/blog/3646550

微信小程序bug记录 textarea textarea在模拟器上没有padding，可是在真机上会自带padding，而且在外部改不了，并且在安卓和IOS上padding还不一样 第一张图是在开发工具上的，第二张图是在IOS真机上的。从上图可以看出来，在开发工具上显示很正常，而且没有padding，可是在真机上左上角就出现了padding，并且无论你在外部对textarea的padding做任何处理，都无法覆盖。 目前有一种解决方式是根据ios和android的不同平台来给teaxarea设置不同的样式。 解决方法：通过wx.getSystemInfo来获取当前设备的平台（IOS or Android),然后根据不同的平台来设置不同的偏移样式来兼容(可以通过margin:负值)。 textarea层级最高，而且还没办法使用z-index来修改，使得自制modal等组件出现问题。这个问题同样在开发工具上没问题，在真机上才出现问题。 目前的解决方法：在modal弹起的时候，将textarea隐藏掉，具体隐藏方法看 3 textarea使用display:none;visibility: hidden; opacity: 0都隐藏不了。 目前的解决方法： textarea.hidden { position: relative; left: -1000%; } <textarea

Learun软件快速开发平台是一款轻量化多语言可视化开发工具。 平台目前分为Java和.net（core）版本，内置有多套UI风格模板，核心功能基本相同，包括：向导式开发组件、BI可视化、拖拽式表单、代码生成器、单据套打、通用app/小程序、权限管理、流程引擎页等功能模块，可以快速有效的开发出市场上目前常见的各种管理系统，如:OA、ERP、CRM、HRM、MIS等。 Learun软件开发平台以“让开发变得简单”为宗旨，深耕软件平台，拥有近10年的行业开发经验，经典.net软件产品已经服务超5000家客户，并得到市场一致好评。 框架采用目前主流的引擎式开发，与传统的软件开发模式相比，其最大特点是通过数据集合、表单引擎、流程引擎、报表引擎等，用可视化的形式进行设置组合，结合项目自身的类库，从而实现对各种复杂系统的快速高效开发。 .net产品 .net是目前客户主要使用产品，目前已正式更新至V7.0.6；基于.net产品开发而来的.netcore产品也已经发布，两者整体功能一致，UI风格一脉相承。 APP模块采用主流的vue框架，同时支持微信、钉钉、支付宝等平台。 1.敏捷开发 敏捷开发向导：表单、流程、数据等常用功能配置向导 代码生成器：八套开发模板，生成类、页面、映射、表单、小程序等 通用图标：PC和移动端图标 数据看板：BI大数据看板 表格组件：各类常用表格 甘特图：了解项目进度