小程序开发实战 4 （理论）

前端开辟实战

4.2 微信开辟平台
有什么用？
1、平台注册（小法式账户申请）
2、代码上传平台 （版本治理）
3、成员治理：治理员、开辟者、体验成员
4、开辟：APPID 、密钥、办事器设置
4.3 开辟者工具
1、若何新建项目（不利用云办事）、JavaScript
2、查找（ctrl + F）、替换、撤消（ctrl + Z）、格式化代码（Atl+Shift+F）
3、编译方式
4、调试方式：console、预览、真机调试（模拟器搬得手机上）、断根缓存（清空小法式加载信息）
5、上传代码
4.4 代码框架先容
1、微信小法式 \approx 网站前端
运转在微信中，而不是阅读器中，与微信慎密相融（获得用户身份、位置、手机存储）
小法式代码框架： Html （wxml）+ Css（wxss）+ Js
2、文件感化
.json：设置属性
.wxml：描写页面结构
.wxss：描写页面款式
.js ：处置页面和用户的交互
图片：png、jpg
3、工程目录
pages 文件夹：寄存页面代码，每个页面一个文件夹，每个文件夹包括四个文件；
utils 文件夹：唯一一个 js 文件，用于寄存公共的 js 代码，给分歧页面挪用
images 文件夹： 寄存全数静态图片
app.js /json/wxss：项目全局文件，可以在页面中间接利用大概拜候
project.config.json：项目设置文件，不需要修改
4、json 设置
app.json ： 页面途径、界面表示、收集超不时候、底部tab
pages字段：一切途径目录
windows字段：顶部布景、笔墨色彩
project.config.json : 工具设置、界面色彩、编译设置
page.json ： 每个页面的属性
5、json 语法
包裹在大括号中
key-value ，key 必须包裹在双引号中
不能利用正文
4.5 wxml 进修
1、标签说话
标志标签：尖括号、关键词
成对出现：<view> 视图容器 </view>
不成对出现：<input/> 输入框
2、属性 （赐与组件分歧的显现结果）
<关键词 属性称号="属性值"> </关键词>
例如：
<view class='demoview' id ="id123" style='abc' bindtap='jsaction' hidden='true' data-ABC='abc666'></view>
style 可以通事后端数据实现静态结果，style 优先级高
hidden 能否隐藏
data-ABC 其中ABC为称号，用于向 js 传递数据
通用属性与公用属性
3、常见组件利用


4、数据绑定：经过两严重括号，把一个变量绑定到界面上
后端供给的静态数据，{{ 变量名 }}  在 js 文件中界说
哪些位置：内容、组件属性、控制属性、关键字、运算
5、列表衬着、条件衬着 wx: for   wx: if  wx:elif  wx: else
4.6 wxss 进修
1、根基语法
挑选器{
    属性：属性值；
}
2、尺寸单元
rpx 按照屏幕宽度停止自顺应。规定屏幕宽度为750rpx。
3、内联款式
class 方式，将款式写入wxss，style 方式，将声明间接写入wxml，用分号分隔。
静态款式在wxss中，静态款式在style
4、挑选器
#my_id  id 挑选器，全部文件中只界说一个
.class class 挑选器，可以同名，后覆盖前
5、常用款式属性
width 、height、color、font-size
6、盒子模子
4.7  js 进修
1、根基语法
正文（单行、多行）
js 变量： var x = 5;  //声明、赋值
js 数据范例：字符串、数字、布尔值、数组

1. var cars = new Array();
2. cars[0]="Saab";
3. cars[1]="Volvo";
4. cars[2]="BMW";
6. var cars = new Array("Sasb","Volvo","BMW");
8. var cars = ["Saab","Volvo","BMW"];
10. cars = null;
12. var carname;  // 履行后为undefined

复制代码

工具： 用花括号分隔。工具的属性以称号和值成对形式（name : value）来界说

1. var person ={
2.    firstname:"John",
3.    lastname:"Doe",
4.    id:5566
5. };

复制代码

工具属性的寻址方式：
name=person.lastname;
name=person["lastname"];
运算符：
赋值、算术运算符、比力运算符、逻辑运算符、字符串相加
条件语句：
if  if ... else
for 循环
2、根基结构
注册页面：page 方式  
page({
          // 这里是页面内容
})
页面数据： data 工具  （只要1个）
函数： （多个）
函数名: function(参数){
},
3、生命周期及回调函数
生命周期函数： onLoad、onReady、onShow、onHide、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage
页面启动（加载）顺序： onLoad、onShow、onReady
页面显现与隐藏、切入背景
实时更新的代码放在onShow中
4、事务响应
什么时势件？
视图层到逻辑层的通讯方式
事务响应：
（1）组件中绑定一个事务处置函数
（2）Page中界说处置函数
4.8 js 数据处置
1、this 关键字
当前工具的援用，指向不牢固
拜候页面数据或函数：
拜候页面数据： this.data
挪用函数：this.onLoad() ， this.action()  页面js中界说的
假如在API中利用this，将不会拜候页面数据及函数，需要挪用api前赞成this，例如：var that = this;
2、页面数据更新
先在视图层（wxml）中停止数据绑定
再在逻辑层停止更新
this.setData({
变量名：新的值
})
留意： setData 与间接点窜变量的区分，间接点窜变量不会对视图层停止更新。
3、数据传递
（1）参数传递  参考开辟者文档
（2）全局数据 app.js   globalData  （作为全局变量利用）
（3）getApp() . globalData 挪用全局变量
4.9 挪用API
1、根基先容
API : 利用法式编程接口
2、范例
事务监听 on开首
同步 API  sync 结尾  ： 法式期待API 竣事再向下履行
异步 API 接管object参数 ： 分支履行，避免提早
首要进修异步API： 有三部分代码， success、fail、complete

1. wx.login({
2.     success(res){
3.      // api 挪用成功履行的代码
4.     },
5.     fail(res){
6.     // api 挪用失利履行的代码
7.     },
8.     complete(res){
9.      // api 挪用竣事履行的代码
10.     }
11. })

复制代码

res 即函数挪用时传入的object范例的参数，包括 errMsg、 errCode、其他等字段
3、功用
（1）显现消息提醒框： wx.showToast
（2）显现对话框： wx.showModal
（3）显现loading提醒框： wx.showLoading ，需要自动挪用wx.hideLoading才能封闭，可按时
（4）页面路由api
wx.relaunch()  封闭一切页面，重新翻开指定页面
wx.redirectTo() 封闭当前，跳转至
wx.navigateTo() 保存当前，跳转至
wx.navigateBack() 封闭当前，返回上一级或多级  （页面栈）
（5）用户信息
wx.getUserInfo  需要隐私包括


对应的api
wx.getSetting  检测能否授权
wx.getUserInfo 获得用户信息
获得授权  button 组件 open-type 属性

感激老哥分享！[爱]