温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

web微信小程序开发踩坑举例分析

发布时间:2021-11-17 15:14:19 来源:亿速云 阅读:153 作者:iii 栏目:web开发

这篇文章主要介绍“web微信小程序开发踩坑举例分析”,在日常操作中,相信很多人在web微信小程序开发踩坑举例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”web微信小程序开发踩坑举例分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

开发环境准备

小程序 出来第二天就被破解,第三天微信就把开发工具开发下载了, 现在只需要下载 微信开发者工具 就可以使用了,

web微信小程序开发踩坑举例分析

创建项目的时候,要选择无 appid, 这样就不会有 appid 的验证了。

目录结构

web微信小程序开发踩坑举例分析

  • app.js 注册app逻辑, app.wxss 全局样式文件 app.json 配置信息

  • pages 存放页面文件

  • utils 工具类代码

  • images 图片资源文件

小程序中每一个页面都会有三个文件 .wxml .wxss .js ,对应着结构、样式、和逻辑,相当于网页中的 html css 和 js 的关系。

开发***个页面

代码来自新建项目

<!--index.wxml--> <view class="container">   <view  bindtap="bindViewTap" class="userinfo">     <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>     <text class="userinfo-nickname">{{userInfo.nickName}}</text>   </view>   <view class="usermotto">     <text class="user-motto">{{motto}}</text>   </view> </view>
/**index.wxss**/ .userinfo {   display: flex;   flex-direction: column;   align-items: center; }  .userinfo-avatar {   width: 128rpx;   height: 128rpx;   margin: 20rpx;   border-radius: 50%; }  .userinfo-nickname {   color: #aaa; }  .usermotto {   margin-top: 200px; }
//index.js //获取应用实例 var app = getApp() Page({   data: {     motto: 'Hello World',     userInfo: {}   },   //事件处理函数   bindViewTap: function() {     wx.navigateTo({       url: '../logs/logs'     })   },   onLoad: function () {     console.log('onLoad')     var that = this     //调用应用实例的方法获取全局数据     app.getUserInfo(function(userInfo){       //更新数据       that.setData({         userInfo:userInfo       })     })   } })

新建的项目中,index 下都会看到这些代码,接下来分别介绍 wxml wxss js

wxml

这个是页面结构的描述文件, 主要用于以下内容

  • 用标签形式指定组件使用 <view></view>

  • 使用 wx:for wx:if 等指令完成一些模板上的逻辑处理

  • 使用 bind* 绑定事件

wxss

样式文件,和 css 语法基本一致,不过支持的选择器语法有限 看这里, 可以使用 flexbox 完成布局。

内部也可以使用 import 命令引入外部样式文件

@import "common.wxss";  .pd {     padding-left: 5px; }

js

页面逻辑控制, 遵循 commonJs 规范

// util.js function formatTime(date) {   // .... }  function formatDate(date, split) {   // ... } module.exports = {   formatTime: formatTime,   formatDate: formatDate }
var utils = require('../../utils/util.js')

这里的js 并不是在 浏览器环境下运行, 所以 window.* 这一类的代码都会报错, dom 操作也是不被允许的,官方目前好像是不能支持其他的 js  库运行,全封闭式,这个以后应该会逐渐完善。

页面上使用 Page 方法来注册一个页面

Page({   data:{     // text:"这是一个页面"   },   onLoad:function(options){     // 页面初始化 options为页面跳转所带来的参数   },   onReady:function(){     // 页面渲染完成   },   onShow:function(){     // 页面显示   },   onHide:function(){     // 页面隐藏   },   onUnload:function(){     // 页面关闭   } })

当我们需要改变 绑定的数据时,必须调用 setData 方法修改,才会触发页面更新,像这样:

Page({     data: {         text: '这是一个页面'     },     onLoad: function() {         this.setData({             text: 'this is page'         })     } })

条件渲染和列表渲染

以下内容来自微信官方文档。

小程序使用 wx:if="{{condition}}" 完成条件渲染,类似于 vue 的 v-if

<view wx:if="{{condition}}"> True </view>

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>

wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

内置变量 index (数组遍历的下标), item (数组遍历的每一项)

<view wx:for="{{items}}">   {{index}}: {{item.message}} </view>
Page({   items: [{     message: 'foo',   },{     message: 'bar'   }] })

使用wx:for-item可以指定数组当前元素的变量名

使用wx:for-index可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">  {{idx}}: {{itemName.message}}  </view>

事件绑定

wxml 只是用 bind[eventName]="handler" 语法绑定事件

<view bindtap="bindViewTap" class="userinfo"><text>tap</text></view>
Page({     bindViewTap: function(e) {         console.log(e.taget)     } })

通过 data-* 和 e.target.dateset 传递参数

<view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>
Page({     bindViewTap: function(e) {         // 会自动转成驼峰式命名         console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦     } })

目前踩过的坑

事件绑定中 e.target.dataset

当在父组件绑定事件和参数,点击时又子组件冒泡事件到父组件,这个时候 e.target.dataset 为空

<view bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo">  <view><text>tap</text></view>  </view>
Page({     bindViewTap: function(e) {         console.log(e.taget.dataset.testMsg) // undefined     } })

到此,关于“web微信小程序开发踩坑举例分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

web
AI