小程序--入门基础

image.png

之前也整理发布了一篇小程序开发笔记,感觉对初学者来说看这篇文章,会觉得繁琐并且可能会难理解,虽然我也是初学者,所以我更清楚初学者入门时需要注意的问题和一些基本知识,如今我把笔记整理出来,分享给大家,希望对您们入门有所帮助,其中写的不好或有错误,恳请大家体谅并指出纠正,本人感激不尽!

1. 基础知识

image.png
image.png
(1)生命周期
image.png
image.png
(2)flex布局基础
image.png

父级用了display:flex;子级也会用到,不影响

换行与不换行flex-wrap


image.png

对齐方法justify-content


image.png
image.png

flex-grow(在空间剩余前提下,可以设置扩展,来扩大某个元素的范围)


image.png

flex-shrink(在空间不足前提下,可以设置等比缩放)

image.png
(3)单位换算(自适应)
image.png
(4)
1)wx:if/wx:else作判断;src属性,直接在标签里定义变量
image.png

说明:
If判断:
与vue语法很类似,vue一般是v-;小程序一般是wx:;
与vue区别,vue是v-if=”!hasUserInfo&&canIUse”;而小程序是wx:if=”{{!hasUserInfo&&canIUse}}”

Src属性:
与vue区别,vue是:src=”userInfo.avatarUrl”;而小程序是src=”{{ userInfo.avatarUrl }}”

直接在标签里定义变量:
小程序和vue一样,{{ userInfo.nickName}}

2)wx:for 列表渲染
image.png

以下就是默认为item


image.png
image.png
(5)标签
和html/html5区别(个人理解)
 View相当div;  image相当img;  text相当span;等等,其他标签查看官网使用
(6)文件放置规范性(个人的规范)
image.png
(7)模板的引入(相当vue中的组件潜入)

类似vue的组件模板使用

image.png

(引入其他单页面中,include或import)

“include方法”


image.png

“import方法”


image.png
image.png
image.png
例子
image.png
image.png
(8)勾选es6转es5此项,使用es6格式,小程序也会自动转为es5
image.png
(9)与vue类似引入其他文件的方法
image.png
(10)请求json数据
1)wx.request(使用https协议)
image.png
2)在本地虚拟json文件获取json数据,与jq有区别,小程序在本地虚拟json数据方法:
image.png

在需要获取本地json数据的js文件中引入这js文件,然后再渲染数据出来:


image.png
(11)跳转页面设置(小程序没有a标签)

Navigator相当html里的a标签;jq中的click点击事件中的window.location.href相当小程序的wx.navigateTo

image.png

2. 知识和案例

https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html (小程序官方文档)

1) 轮播:(以下是官网的组件swiper)
image.png

各属性值


image.png
例子

Wxml


image.png

js


image.png
image.png
2) 其他组件案例在官方网都有类似示例

3. 注意事项

(1)只能分享给朋友,不能分享朋友圈;可以添加到手机桌面,只是相当快捷键
(2)window相当于wx
image.png
(3)跳转页面设置
image.png
(4)需要改变data里面定义的值,用this.data无法改变数值,需要用到this.setdata来强制改变
image.png
(5)项目的预览按钮只有注册了appID才能预览
image.png
(6)路径设置(js的data里面一般路径设置)

若文件是这样设置


image.png

路径设置为


image.png
(7)
1)窗口window、tabBar底部(每在page文件夹里面新建一个子页面,需要在app.json文件的pages里面定义新建这文件路径,若软件没自动新建(一般会自动添加),需要手动添加,不然会报错)
2)还需要注意app.json文件内不能添加注释行,不然报错
image.png
(8)app.json配置
image.png

需要补充下:
1) tabBar(底部导航)是一个数组,只能配置最少2个,最多5个tab,tab按数组的顺序排序
2)


image.png
(9)事件

bindtap (冒泡)
catchtap (防止冒泡)

image.png
(10)pages文件夹里的子页面中js设置这句var app=getApp();原因是可以获取全局变量
image.png
(11)image组件不能像jq一样用alt(加载前出现的图片)
(12)一处不能同时定义两个不能点击事件的动画animation="{{}}"(个人理解)
(13)获取后台json数据的区别(本人理解的区别)

JQ :
ajax获取数据,用$.ajax,都在js中获取到的数据,获取到的数据在ajax中,用类别定义对应的元素获取后台的相对应json字段

小程序 :
wx.require获取数据 当用到多个类似结构数据。可以用wx.for={{arry}},在data定义一个数组,data:{ arry:{} },然后在后面的onload(也可以放在其他的全局函数内)中用wx.require定义tempdata=data.product(这个product是后台的json数据的名字,这可以改变),然后需要获取字段,就在this.setdata那改变arry:tempdata (跟jq不同是,在wxml中已经用 arry.对象 形式表示了,不需要在js中的wx.require中再用类别分明对应不同元素位置插入相对应的元素字段)

本文作者lilyping
越努力,越幸运
原文链接:https://www.jianshu.com/u/3908e601f4ec
微信公众号:BestLilyPing
github:https://github.com/lilyping
Demos源码地址:https://github.com/lilyping

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容