小程序--入门基础

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