微信小程序开发-第一弹

点击蓝色字关注我们!

一个努力中的公众号

长的好看的人都关注了

2e63083d32af5e2cde4d4da03a235da7.png

前言:

      本篇文章为大家详细介绍微信小程序开发第一篇,后续步骤会逐步更新,欢迎大家关注。

第一步  注册

       1.1 打开网址 https://mp.weixin.qq.com/  然后选择右上角的立即注册

5a35fddcff4ad8084916bff9cc46bf18.jpeg

      1.2 然后选择小程序

b71af40c87f593ed853b38dec3ada3e2.jpeg

    1.3  输入邮箱,密码,以及验证码,然后点击注册,然后按照提示,进行邮箱激活,以及进行小程序信息登记,选择小程序类型为个人,然后填写个人信息

84adbe54eea6d69077429208a9a189eb.jpeg

    1.4 下载微信开发者工具 

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    1.5 安装后 双击打开,选择小程序项目

89cad6791e35ab041596adf4b50ead0f.png

      1.6 创建项目

           1.6.1 选择项目所在目录

166ec8ef424f51b219b9883b3120fd2e.png

              1.6.2 到微信公众平台获取小程序的AppId

eafddee2f6e8fa92894573a950f0a1ff.jpeg

            1.6.3 复制小程序AppId 填入AppID列

d8645921fad5727346e6710cb301742f.png

           1.6.4 填写小程序项目名称,选择创建的模板,点击确定

                7603050e25d7fcb85f01bc5f3972907d.jpeg

       1.7 项目结构简述

             1.7.1 上一步的确定点击之后,微信开发者工具就会为我们自动生成一个项目,具

            体结构如下图

18d7ce74e3c8980f3db5633cdd345d28.jpeg

                1.7.2 快速生成对应功能文件夹,具体操作如下图,然后保存之后,你就会发现             Pages文件夹中会自动生成一个你填的文件夹。以及对应的wxml、wxss、js以及               json文件

                  wxml    --- 对应html

                  wxss    ---  对应css

                  js         --- 我们所有的js操作全部都在这里 

                  json    --- 不经常使用,主要用来存放一些平常使用的json参数等

fe5a7623ca68e0ae7ce79ae59ff4ac50.jpeg

 具体一些原生方法或者控件可前往

https://developers.weixin.qq.com/miniprogram/dev/index.html?t=19012313

查看小程序开发

本编文章总结暂时到这里,小编将在下面的文章中,对小程序的开发流程进行进一步详细的总结。

看完本文有收获?请转发分享给更多人

添加小编微信,加入技术交流群

### 微信小程序 `scroll-view` 组件在 iOS 设备上的性效果问题分析 #### 1. 性效果的表现与原因 在微信小程序中,`scroll-view` 的默认行为会在滚动超出边界时表现出一种“回”的效果,这种现象尤其明显于 iOS 平台。这是由于 iOS 原生支持的性滚动机制所致[^2]。 当开发者希望禁用此性效果时,可以通过设置特定属性来调整这一行为。如果不加以处理,默认情况下会引发用户体验不佳的情况,比如页面底部或顶部出现空白区域等问题。 --- #### 2. 实现方法或修复方案 ##### 方法一:通过 `bounces` 属性控制性效果 为了消除 iOS 上的性滚动效果,可以使用 `bounces` 属性将其设为 `false`。该属性的作用是决定是否允许滚动视图在到达边缘后继续反。以下是具体代码示例: ```html <scroll-view scroll-y="{{true}}" enhanced="{{true}}" bounces="{{false}}"> </scroll-view> ``` 上述代码片段中的 `enhanced` 和 `bounces` 是关键参数。其中: - `enhanced` 开启增强特性以优化性能; - `bounces` 设置为 `false` 可有效移除性效果。 --- ##### 方法二:全局配置 JSON 文件 对于某些特殊场景(如整个页面无滚动需求),可以直接在页面对应的 `.json` 配置文件中加入如下字段: ```json { "disableScroll": true } ``` 这种方式适用于完全不需要滚动交互的小程序页面,能够彻底屏蔽掉任何可能产生的滚动事件及其副作用。 需要注意的是,这种方法仅适合静态布局固定的简单界面设计,在动态数据加载较多的情况下并不推荐单独依赖此项策略解决问题。 --- ##### 方法三:结合业务逻辑自定义节流防抖 除了针对硬件层面的操作外,还可以考虑软件层面上对用户操作频率进行限制。例如之前提到过的因快速滑动而引起的定位偏差情况,则可通过引入第三方库或者手动编写函数完成限流功能。下面是一个简单的例子演示如何利用 lodash 库实现这一点: ```javascript import _ from 'lodash'; Page({ data: { throttle: false, }, bindscroll: _.throttle(function(e){ console.log('当前位置:', e.detail.scrollLeft); }, 300), }); ``` 不过这里要注意的是,虽然关闭了内置的节流机制(throttle),但如果频繁调用仍可能导致卡顿或其他异常状况发生,因此建议合理评估实际应用场景后再做选择[^1]。 --- ### 总结 综上所述,要解决微信小程序 `scroll-view` 在 iOS 中存在的性效果问题,主要可以从以下几个方面入手: - 利用 `bounces=false` 参数直接关闭物理意义上的惯性动画; - 对项目结构较为单一的情形采用 json 方式的全面封锁措施 ; - 或者基于前端框架提供的工具包定制个性化的解决方案规避潜在风险. 每种方式都有其适用范围以及局限之处,所以在开发过程中应综合考量各方面因素选取最优解法。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值