学习小程序笔记

这几天还是研究小程序,本来以为是山穷水尽了,昨天却也柳暗花明。因为,在网上我学到了,怎么下载线上小程序的源码的方法。于是,我下载了两个小程序源码,分别是汉语字典和英语字典,最重要的是得到了那两个小程序的服务器域名,这是极其重要的。我自己不会弄服务器,但是,我能用别人的服务器。我只要稍作设置,就能获取我想得到的东西。比如,汉语字典,我想得到汉字笔顺的gif图片的网络地址。比如请求一个字“我”,服务器给我返回来几个信息,其中就有gif图片的网络地址。然后,再用小程序的图片组件,就可以显示出图片了。我昨天用一天的时间,来删改我下载下来的小程序,因为,下载下来的小程序页面非常美,我想复制到我的小程序中,但极其麻烦,有的问题,我百思不得其解,到昨天晚上了,我才想明白,用别人的,不如用自己的,我就开始从零编写页面,一点一点写,我发现,form中,input和button组件,就是不能在一行显示,怎么也弄不过。然后,研究form表单,看书,看官方教程,一点一点弄,很费眼费神呢。不知不觉就凌晨12点了。

先说flex布局吧。

一个页面就是一个大容器,例如:我们用view当做一个容器,view中的view当做项目。容器我用view(rongqi)表示,项目我用view(xiangmu)表示。

view(rongqi)的类选择器class我用class=“container”表示,view(xiangmu)的类选择器我用class=“item”表示。

在.container

在.item{

align-self(控制自己在交叉轴上的对其方式)::flex-start(起点对齐)|center(交叉轴中点)}

再说form组件:

将包含着form组件内的用户输入的(开关选择器) (输入框) (多项选择器)(滑动选择器) (单项选择器)

(从底部弹起的滚动选择器) 提交。

怎么提交呢?点击button按钮提交。首先,设置然后,在上述组件中设置属性name。比如结果的值是true或false;结果是输入的内容;结果是一个数组;结果是一个数字;结果是一个选择的内容;

经常单独用。

最重要最常用的是input输入框组件。

假如,form中的“一个字符串”是tijiao,也就是说,form组件是这样写的

input组件是这样写的

上述组件的结果,提交都要用到button组件,而且要设置button组件的formType属性是submit,也就是说button组件是这样写的

提交

最后,还要把input组件和button组件放在form组件之中,也就是这样写的:

提交

当然,这些代码是在wxml中写的,如图:

编译后的显示页面,如图:

因为没有对输入框进行美化,就是这样空空的。

接下来要思考解决的问题是:在输入框输入内容,点击提交按钮后,结果到哪里了呢?我们看,现在用到上面设置的一个字符串tijiao了。建立一个函数,名称就是一个字符串tijiao,这样写

tijiao:function(e){}

输出的各个结果e.detail.value怎么用呢?就在新建的函数里面用。可以把结果赋值给某个变量。上面新建立的函数是tijiao:function(e){},用结果的时候,就在函数大括号里面设置。比如,把在输入框输入的内容赋值给一个变量word(变量名是任意的,我现在就用word来代表一个变量),代码是这样写的:

tijiao:function(e) {

this.setData({

})

}

代码是在js中写的,而且,函数tijiao:function(e){}要放在Pages({})大括号中。

这样,我们就把在输入框里输入的内容赋值给word了,接下来,就可以使用word来做一些事情了,比如,用word作为请求的内容向某服务器请求数据。比如,我在输入框输入了一个汉字“我”,那么,通过函数,就把输入的“我”赋值给word了,然后,再通过一定的方式(见下文),拿word来向某服务器请求数据,服务器一看,word来了,就知道要返回什么数据了,比如,返回了汉字“我”的笔顺的GIF动画图片的网络地址,那么,我就可以在image图片组件中,使用这个图片地址了。

以上就是form表单组件的用法。需要注意的是,大小写不能错。

下面,我把两个词典的服务器地址,和请求写下来,这是非常重要的,很有价值。

小程序的API有许多种,最常用,最重要的是发起网络请求,也就是wx.request(OBJECT)

示例代码:

我找到的那两个具体代码是:

汉语字典代码:

英语字典代码:

以上就是我学习小程序,编写小程序的所思所感。哪里不对,希望提醒我,也要多提建议!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180803G0ZJG000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券