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
网友评论