如何快速上手小程序开发（史上最全）

01 开发前准备

1. 登录微信小程序官网：mp.wx.qq.com（这里以微信小程序为例）
2. 申请属于你个人的小程序账号（分为个人和企业，在这申请个人很容易）
3. 按照文档，下载微信开发者工具，进行登录，创建一个新的文件夹，他会自动给你生成默认的文件，然后填入你的appID，模板一般选择JavaScript模板。

02 页面文件的配置

1.配置文件 app.json

pages 存放项目的页面，哪个页面在最前面，哪个页面就是默认页面；

windows 项目的窗口：

"backgroundTextStyle": "light",
//背景文字
"navigationBarBackgroundColor": "#f30",
//导航栏背景颜色
"navigationBarTitleText": "猫不吃鱼",
//导航栏标题
"navigationBarTextStyle": "white"
//导航栏文字颜色：white|black

2.配置文件 xxx.json

在哪个页面下的.json文件配置，就等于单独对这个页面进行配置

"navigationBarTitleText": "爱笑话",
//标题颜色
"enablePullDownRefresh": true,
//允许下拉刷新
"backgroundTextStyle": "dark",
//背景文字颜色
"backgroundColor": "#f30",
//背景颜色
"usingComponents": {}
//使用组件

3.小程序页面(home为例)

• home.js 业务逻辑
• home.wxss 页面样式(类似于css)
• home.wxml 模板内容(类似于html)
• home.json 页面配置

4. tabBar 底部栏的配置

"tabBar": {
    "color": "#484848",
    "selectedColor": "#16a5e7",
    "list": [{
      "pagePath": "pages/base/base",
      "text": "语法",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home-h.png"
    }]
},
//color 文字末让颜色
//selectColor 文字选中颜色
//list 页面列表
//pagePath页面地址
//text文本
//iconPath 图标地址
//selectedIconPath 选中图标地址

03 模板语法

条件渲染：wx:if="{条件}"
多重条件渲染：wx:elif="{{多重条件}}" ，wx:else
文本渲染：{{ }}，属性的渲染，placeholder="{{msg}}"
列表渲染：

<view wx:for="{{list}}" wx:key="index">{{index}}--{{item}}</view>

自定义列表：多重for循环定义名称

<view wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex">
{{myindex}} --{{myitem}}</view>

<template> 模板
   定义：

<template name="user"> 
     <view>用户名：{{uname}}</view>
</template>

导入： (只能导入template)

<import src="xxx"/>

 使用：

<template is="user" data="{{uname:'mumu'}}">

<include> 引入
 使用：

<include src="xxx">

相当于把src内容拷贝一份放到当前位置（不能导入template）

04 事件方法

 自定义方法：showMsg(){ }，

调用方法：<button bindTap="showMsg">，

表单的双向绑定：

<input value=“{{msg}}” bindinput=“changeHd”>
//定义方法更新视图与data
function changeHd(e){
    //获取表单的值
   let msg = e.detail.value;
   // 更新视图和data
   this.setData({msg})
}

 事件：bindtap点击，bindcomfim 确认，bindchange表单值发生改变，bindinput表单输入

微信api：

    wx.stopPullDownRefresh() 停止下拉刷新
    wx.showToast 吐司提示
    wx.request(url,methd,success(){}) 网络请求
    默认请求地址需要在后端配置，默认请求地址要求https

key：key值自动解构

<view wx:for="{{list}}" wx:key="docid" class="item">
  {{item.summary}}
</view>

Page参数： 

    data存储数据
    onload() 当页面加载完毕
    onPullDownRefresh 下拉刷新回调函数
    onReachBottom 触底回调函数
    自定义方法

data与更新：

    js 里面方法data数据 this.data.msg
    在wxml使用 {{msg}}
    更新data与视图 this.setData({key:value,key2:value2})
    注意this指向，在wx.xxxapi里面this 的wx这个对象不是当前页面