微信小程序1

注册（申请appID），一个账号只能用1个小程序：

 

 登录后进入开发：

 

 

 

 下载开发者工具：

 

 

 

 

 

 

 

创建项目：

 

 

 

设置启动页面：

 

 创建3个app文件，其中app.json用于注册当前有什么页面：

 

创建文件夹和页面：

 

 

实现：

 

 

使用仓库进行git管理：

 

初始化一个新的本地仓库：

  添加当前项目到暂存区，再提交到本地仓库并命名为“初始化项目”：

 

 

 

建立一个远程仓库：

 

 

 

 git进行关联：

 

 把项目push过去:

 

 

 每次改动完项目及时提交：

 

 查看之前提交的项目：

 

回退到初始化项目再建个项目

下图后面的一串值是哈希值：

 

 

 

此时只是本地仓库有了，接着push到远程： 

 

 下载别人远程仓库的tag01，并在开发者工具中打开：

 

 

 

 

 

 

 

 

 

 

 

 {{}}获取变量值：

 

 

 

 

 

 

属性{{}}:

 

 

 

 

 

 

 

 

 

 wx:for

 

 

 

 button计数效果：

 

 定义+1函数：

 

点击事件是bindtap，触发函数是上图定义好的：

 

 sitemap.json文件表示是否被微信检索到自己开发的微信小程序。

project.config.json:是开发的环境

 

 

 

 全局配置：

直接写路径，保存后就能自动生成页面:

 

 

 windows:

设置导航颜色：

 

 

 

 

 

 设置导航文本样式：

 

 

 

 

标题：

 

 

 

 

设置下拉刷新及背景色为蓝色:

 

 

 

 

 

设置三个点的样式：

 

 

 

 

 

tabBar:底部栏

 格式化快捷键：alt+shift+f:

 list里面有2个元素对应tabBar的2个，pagePath表示点击后要跳转到的页面，iconPath表示默认显示的图标，selectedIconPath表示选中后的图标。

 

 

 

设置tabBar里面文本z选中的颜色用selectedColor： 

 

 

 定义编译模式方便测试：

 

 

 局部配置分类页面，更改局部的json文件即可，局部配置的优先级大于全局配置：

 

 

 渲染原理：

 

 

小程序启动原理：

 

 

app.js生命周期函数执行顺序：

 

 

 不同的进入小程序的场景对应不同的代码：

 

 

 button点击来获取用户信息：

得写open-type属性且利用bindgetuserinfo事件

 

 

 

 

 或者利用组件直接展示用户信息：

userNickName：用户名

userAvatarUrl：头像

 

 

在app中定义全局数据并在home.js使用：

 

 

 

 

 

 

 

 

 局部生命周期函数：

 

 

组件文档：

 

 

 

text组件：

 

 

 

 

 

 

 

 

 

 

 

button组件：

size变成mini时，button就变成了行内块。type设置类型

 

 

 

 

 

 设置按住按钮时就具有某个class:

 

 

 

 

view组件：

 

 

 

注意hover-stay-time是number类型：

 

 

 

 

 

 下面属性防止向上冒泡：

 

 这样点击子view就不会触发父view了：

 

 

 

image组件：

 

 

 

 

选中手机上传的图片：

wx.chooseImage

 

  

 

 

 

 

 

 

bindload以及lazy-load：

 

 

 

show-menu-by-longpress：

 

 

 

 

mode设置图片缩放(本质就是对image设定的样式):

图片是往image里面填的，不是一体的

scaleTofill:不管原图片多大，一律变成320*240(加入image没设置宽高)

widthFix:原图片宽度变成image的宽（默认320），image的高度根据原图片的高度而变化了

如果给image设置了class，它的mode还会起作用

 

 

 

 

 

 

 

 

input组件：

 

 

 

 

 

 

 

 

 

 

 

 scroll-view实现

水平滚动scroll-x:

 

 

 

nowrap是不换行

 

 

 垂直滚动scroll-y：

注意父组件要设置高度

 

 

 

 

 

 监听滚动bindscroll：

 

 

 

 

在app.js里面的样式是应用于全局的：

 

 

iPhone6上：100px=200rpx ，且rpx可以实现自适应

@import导入样式：

 

 

在wxss中，background-image:url('只能填写http地址')