一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记
客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面。
在这个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 //当前页的一些初始数据,视业务需求而定 })
this.onLoad(); //重新加载onLoad()console.log('i am refreshing....');}
经过微信开发者的调试工具,我们可以轻松看到log的记录,在那个setData里面是初始的数据。
最后,在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还要优雅。
原文地址https://www.cnblogs.com/ZaraNet/p/10470648.html
一个C#程序员学习微信小程序的笔记相关推荐
- 一个程序员对微信小程序的看法
我们公司用两周的时间开发了一款微信小程序,叫<如e支付>,大家可以去体验一下.由于接口都是写好的,所以开发起来很快.我将从4个不同的角度来介绍我对微信小程序的理解. 1.技术的角度 ...
- 非典型程序员的微信小程序开发纪实
作为一个非典型程序员,祁劲松主导开发了一系列微信小程序(如IP查询.邮编库.查号吧+.手机归属.一把刀新华字典等).在开发过程中,他遇到了很多难题,并进行了多方位的思考,在他看来: 微信小程序的开发并 ...
- 0基础跟着黑马程序员学微信小程序前端开发Day01
学习目录 一.项目的基本组成结构 二.小程序页面的组成部分 三.创建小程序页面 四.小程序的一些组件 1.常用视图容器类组件 2.常用基础内容组件 3.button 按钮的基本使用 4.image 组 ...
- 「黑马程序员」微信小程序最新接口
1. 轮播图 // GET https://api-ugo-web.itheima.net/api/public/v1/home/swiperdata 参数名 类型 说明 image_src stri ...
- 黑马程序员之微信小程序
- 微信小程序实现lot开发01 学习微信小程序 helloworld
最近走进一个新项目的任务里,主要的任务是实现用微信小程序利用websocket使用mqtt协议走网络控制继电器(其实在生活中这个技术已经普及了,我们用的充电桩扫码充电,我们学校里的饮水机扫码接水以及我 ...
- 前端学习——微信小程序
今天是学习微信小程序的第三天. 1. 一定要给脚本文件定义出口.如以下代码 var local_database = [{date: "Nov 18 2017",title: &q ...
- 微信小程序之目前为止史上最全的微信小程序项目实例, 微信小程序实战学习
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
- 0基础学习微信小程序(转载)
原文地址:https://blog.csdn.net/qq_41464123/article/details/105198163 前言 微信小程序作为近几年"微服务"的杰出代表,应 ...
最新文章
- CString转换成char*
- Eclipse开发环境设置
- wait 和 sleep 的区别
- 快速排序算法_Python实现快速排序算法
- 培养有见识的孩子,这6部适合孩子的纪录片,在家也能涨知识!
- SpringSocial业务系统与社交网站的绑定与解绑
- 抽象类的继承/纯虚函数的实现
- 数据分析之pandas-profiling
- 破解visio2013记录
- swagger 修改dto注解_Swagger注解及参数细节的正确书写。
- Rosalind第16题——ros_bio16_MPRT
- python100份教材/教程分享学习,初中高级总有适合你的
- [2] UI原型设计工具Pencil Project 学习系列----- 入门
- 【并发编程】当我们谈论线程安全时我们在谈论什么
- 云学python (第二章用编程改造世界·小练习)《vamei-从Python开始学编程》
- cannot find -lGL问题的解决方法
- 微信公众号开发之用户分组
- dubbo消费者调用报错Unsupported protocol rest in notified url
- 网页缩放,页面展示比例不变
- 体脂秤方案开发脂肪秤方案设计
热门文章
- python编码-python中处理中文编码问题
- java中6左移2怎么算_(六)Java中的按位运算
- mysql genlog 分析_Mysq性能分析 —— Genral log(普通日志)与 Slow log(慢速日式)...
- python在匿名函数作和_跟光磊学Python开发-匿名函数函数和高阶函数
- python 只取数值_Python:你会生成列表吗?-- 列表生成式
- numpy输出到屏幕时有逗号和没逗号的原因
- php5.3 with-mysql centos_Centos编译搭建php7让php5.3和php7兼容共存教程
- xml解析 只有节点属性 android,and android:解析xml,一个节点标签中,有多个属性,怎样解析?...
- 自然语言处理期末复习(6)话题模型
- 信息系统项目管理师案例考试汇总(2005~2021年)