之前也整理发布了一篇小程序开发笔记,感觉对初学者来说看这篇文章,会觉得繁琐并且可能会难理解,虽然我也是初学者,所以我更清楚初学者入门时需要注意的问题和一些基本知识,如今我把笔记整理出来,分享给大家,希望对您们入门有所帮助,其中写的不好或有错误,恳请大家体谅并指出纠正,本人感激不尽!
1. 基础知识
(1)生命周期
(2)flex布局基础
父级用了display:flex;子级也会用到,不影响
换行与不换行flex-wrap
对齐方法justify-content
flex-grow(在空间剩余前提下,可以设置扩展,来扩大某个元素的范围)
flex-shrink(在空间不足前提下,可以设置等比缩放)
(3)单位换算(自适应)
(4)
1)wx:if/wx:else作判断;src属性,直接在标签里定义变量
说明:
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 列表渲染
以下就是默认为item
(5)标签
和html/html5区别(个人理解)
View相当div; image相当img; text相当span;等等,其他标签查看官网使用
(6)文件放置规范性(个人的规范)
(7)模板的引入(相当vue中的组件潜入)
类似vue的组件模板使用
(引入其他单页面中,include或import)
“include方法”
“import方法”
例子
(8)勾选es6转es5此项,使用es6格式,小程序也会自动转为es5
(9)与vue类似引入其他文件的方法
(10)请求json数据
1)wx.request(使用https协议)
2)在本地虚拟json文件获取json数据,与jq有区别,小程序在本地虚拟json数据方法:
在需要获取本地json数据的js文件中引入这js文件,然后再渲染数据出来:
(11)跳转页面设置(小程序没有a标签)
Navigator相当html里的a标签;jq中的click点击事件中的window.location.href相当小程序的wx.navigateTo
2. 知识和案例
https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html (小程序官方文档)
1) 轮播:(以下是官网的组件swiper)
各属性值
例子
Wxml
js
2) 其他组件案例在官方网都有类似示例
3. 注意事项
(1)只能分享给朋友,不能分享朋友圈;可以添加到手机桌面,只是相当快捷键
(2)window相当于wx
(3)跳转页面设置
(4)需要改变data里面定义的值,用this.data无法改变数值,需要用到this.setdata来强制改变
(5)项目的预览按钮只有注册了appID才能预览
(6)路径设置(js的data里面一般路径设置)
若文件是这样设置
路径设置为
(7)
1)窗口window、tabBar底部(每在page文件夹里面新建一个子页面,需要在app.json文件的pages里面定义新建这文件路径,若软件没自动新建(一般会自动添加),需要手动添加,不然会报错)
2)还需要注意app.json文件内不能添加注释行,不然报错
(8)app.json配置
需要补充下:
1) tabBar(底部导航)是一个数组,只能配置最少2个,最多5个tab,tab按数组的顺序排序
2)
(9)事件
bindtap (冒泡)
catchtap (防止冒泡)
(10)pages文件夹里的子页面中js设置这句var app=getApp();原因是可以获取全局变量
(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