C#程序员怎么学习微信小程序
创始人
2024-12-23 21:04:05
0次

起步

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

C#程序员怎么学习微信小程序

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

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

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

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

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

{{text}}
{{array[0].msg}}

 小程序页面中还有很多的方法,像 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里面是初始的数据。

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

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

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

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

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


 outer view
 
 middle view
 
  inner 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里面的值,也就达到这效果。

相关内容

热门资讯

空调连续工作多久需要停机休息 空调连续工作的时间取决于多个因素,包括空调的型号、功率、使用环境和维护情况等。一般来说,空调可以连续...
空调哪个符号是除湿的 空调除湿功能通常用一个水滴形状的符号表示。不同品牌和型号的空调遥控器可能会有所差异,但一般来说,除湿...
格力空调多长时间加一次氟利昂 1、一般情况下,空调对氟利昂的使用量是非常小的,所以在空调使用了四年左右的时候再考虑加也没问题。2、...
空调用多长时间需要加氟一次 一般情况下是五年。当出现以下这几种情况时,空调才需要加氟。1、空调的室内机和室外机各有两个接口,当接...
格调生活·C标思享荟:卡萨帝在... 9月12日的郑州龙湖金融岛,夜风轻拂,灯光璀璨。“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑...
品牌价值破千亿、高端份额持续领... 9月12日,“C标时刻共传奇——卡萨帝思享荟暨20周年品牌盛典郑州站”在郑州龙湖金融岛举办。2026...
空调主板坏了修800还是换新的 空调主板坏了是修还是换新,需要考虑多个因素,以下是一些建议:1. 维修成本:如果维修费用较低,比如 ...
空调开多久需要休息多长时间 问题:空调开多久需要休息多长时间回答:1、在使用空调的过程中,一般空调开7~8个小时左右需要休息2~...
中央空调多长时间清洗一次 1、一般空调开机前清洗一次即可,空调开机中间时段再清洗一次,空调关机时清洗一次,这样比较合理。2、空...
中央空调氟利昂多久加一次 看空调制热和制冷程度,很多人的观点认为氟利昂必须一年放一次,其实这个观点是错误的,理解上面有点偏差,...