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 相关文章推荐
用javascript实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
Javascript 判断函数类型完美解决方案
Sep 02 Javascript
js实现兼容IE6与IE7的DIV高度
May 13 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
node.js操作mysql简单实例
May 25 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 12 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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
PHP 断点续传实例详解
2017/11/11 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
2011/10/29 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
2013/04/15 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
JS实现JSON.stringify的实例代码讲解
2017/02/07 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
bootstrap中selectpicker下拉框使用方法实例
2018/03/22 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
layui实现checkbox的目录树tree的例子
2019/09/12 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
Python读写docx文件的方法
2018/05/08 Python
Python面向对象类的继承实例详解
2018/06/27 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
pycharm运行scrapy过程图解
2019/11/22 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
css3实现可拖动的魔方3d效果
2019/05/07 HTML / CSS
安全标准化汇报材料
2014/02/03 职场文书
商业项目策划方案
2014/06/05 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
导游词书写之黄山
2019/08/06 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL
Python基础之条件语句详解
2021/06/16 Python
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL