C#程序员入门学习微信小程序的笔记


Posted in Javascript onMarch 05, 2019

前言

因为工作需要,最近学习了一下微信小程序,在此分享一下大概的流程。

强烈建议大家先去看微信小程序简易教程:点我进入

起步

客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面。

C#程序员入门学习微信小程序的笔记

在这个Index页面就是我们的首页,客户端在启动的时候,将首页的代码装载进来,通过微信的机制,就渲染出来了页面。

App({
 onLaunch() {
 // 小程序启动之后 触发
 }
})

小程序在启动的时候,首先通过 App() 定义的 App() 实例的 onLaunch  方法,这个方法是各个页面共享的,当然还有更多的回调事件。

Page({
 data: {
 text: 'init data',
 array: [{msg: '1'}, {msg: '2'}]
 }
})

在页面加载时,data这个属性会提供给页面使用,会以Json的形式返回给前端,然后我们可以试着把这个值渲染在页面上。

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

 小程序页面中还有很多的方法,像 onReady() 当页面加载妥当,可以进行交互的时候触发,还有小程序被切入后台的 OnHide() 事件。当然这些都是应用级的事件,还有一些和用户亲密交互的事件,官方称这种叫做页面事件处理函数。

像最操蛋的是微信小程序没有下拉事件 onPullDownRefresh() ,这个东西自己搞,我也是福气了,不过也对,这东西解耦,就当我刚才说的是放屁。。。例如以下代码。

在.json文件里设置 "enablePullDownRefresh": true,用于开启页面下拉加载效果,可以当前页设置也可以全局设置;

{//当前页
 "enablePullDownRefresh": true //当前页
 "backgroundTextStyle": "dark" //顶部显示颜色为深色的三个点
}
"window": { //全局
 "enablePullDownRefresh": true //全局
 "backgroundTextStyle": "dark" //顶部显示颜色为白色的三个点
 }

然后在某个页面的js中,去写一个下拉事件,然后例如这样的。

onPullDownRefresh:function(){
 var that = this;
 that.setData({
  currentTab: 0 //当前页的一些初始数据,视业务需求而定
 })

wx.startPullDownRefresh();
this.onLoad(); //重新加载onLoad()
 console.log('i am refreshing....');
 }

经过微信开发者的调试工具,我们可以轻松看到log的记录,在那个setData里面是初始的数据。

C#程序员入门学习微信小程序的笔记

最后,在onload事件中停止刷新。

onLoad: function (options) {
 wx.stopPullDownRefresh() //刷新完成后停止下拉刷新动效
 },

你可以通过一个按钮来进行刷新,bindtap可以直接请求逻辑层。

下面就要说一说事件了,事件是视图层到逻辑层的通讯方式。事件是绑定到dom上的,当触发的时候就回去执行响应的逻辑层。这些都是最基本的。

但是其中的事件分为 bindtap 和 catchtap 。那这两个有什么区别呢?一个是冒泡 一个是不冒泡。那这冒不冒泡又是个什么鬼意思呢?

<view id="outer" bindtap="handleTap1">
 outer view
 <view id="middle" catchtap="handleTap2">
 middle view
 <view id="inner" bindtap="handleTap3">
  inner view
 </view>
 </view>
</view>

经过测试,点击inner view 会触发 inner view和 middle view的事件,而点击 middler view 则只会触发它的事件,因为再放上走被outer view给挡住了 。

此处为了调试,请在app.json中的pages中添加页面,然后可以通过以下代码进行跳转。

wx.navigateTo({
  url: '../demo/demo',
 })

在小程序中,也支持本地存储。 例如api  wx.setStorage() 和wx. setStorageSync() 。

还有就是它和Vue一样不支持jquery,也就是没法装逼了。另外我关注的自适应。微信小程序支持rpx;可以达到自适应。这我开心坏了。

为了安全性,它不知道跳转外网。这个可能需要申请(money,你懂的。)

问题:关于无法小白我没办法获取input里面的值,因为没办法操作dom,这个是有原因,因为微信小程序无法确定dom,因为是有中间的编译,这和vue有点差距。可以这么操作。

解决:微信对input的组件,提供了多个事件,看来只能通过这些事件去实现单个input的值的获取。

根据这些表单事件我们可以去获取里面的值然后去改data里面的值,也就达到这效果。

看样子,小程序比Vue还要优雅。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
获取中文字符串的实际长度代码
Jun 05 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
JavaScript函数的4种调用方法实例分析
Mar 05 #Javascript
微信小程序保存多张图片的实现方法
Mar 05 #Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 #Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 #Javascript
es6数据变更同步到视图层的方法
Mar 04 #Javascript
使用webpack构建应用的方法步骤
Mar 04 #Javascript
详解element-ui中form验证杂记
Mar 04 #Javascript
You might like
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php生成随机数的三种方法
2014/09/10 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
理解javascript异步编程
2016/01/27 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
js date 格式化
2017/02/15 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
BootstrapValidator实现注册校验和登录错误提示效果
2017/03/10 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
使用Sonarqube扫描Javascript代码的示例
2018/12/26 Javascript
vue.js实现简单购物车功能
2020/05/30 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
2020/08/03 Javascript
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python中私有函数调用方法解密
2016/04/29 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Django 再谈一谈json序列化
2020/03/16 Python
keras读取训练好的模型参数并把参数赋值给其它模型详解
2020/06/15 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
跨域修改iframe页面内容详解
2019/10/31 HTML / CSS
英国知名美妆护肤在线商城:Zest Beauty
2018/04/24 全球购物
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
运输服务质量承诺书
2014/03/27 职场文书
我们的节日元宵活动方案
2014/08/23 职场文书
公司中层管理培训心得体会
2016/01/11 职场文书