一    
    
    
  、微信小程序特点

二


     


     


     
、使用准备

1.注册开发者帐号

2.下载微信开发者工具

3.微信开发文档

三
 




 




 




、项目结构

四   

   

   

 、配置文件

1 

     

     

     、app.json

pages 存放项目的页面

window 项目的窗口

tabBar 底部栏的配置

2

  




  




  




、页面.json

五  


  


  


、小程序内置组件

逻辑视觉分区(div)

文本(span)

图片组件

选择

图标

滚动区域

幻灯片

六  
     
     
     、模板语法

条件渲染

多重条件渲染

文本渲染

列表渲染

自定义列表渲染

一


   




   




   



、微信小程序特点

小程序依赖微信 快    
    
    
  ，因为免去下载和安装 小


     


     


     
，一个包不能超过2M 强,微信有什么能力它也拥有 广,传播微信圈子近10亿用户

QQ 微信 支付宝 字节跳动 美团 鸿蒙 都有类似小程序

二 



 



 



、使用准备

1.注册开发者帐号

注册小程序帐号https://mp.weixin.qq.com/

2.下载微信开发者工具

稳定版 Stable Build | 微信开放文档https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.微信开发文档

微信开放文档https://developers.weixin.qq.com/miniprogram/dev/framework/

三                 、项目结构

四



    




    




    


、配置文件

1














、app.json

pages 存放项目的页面

哪个页面在最前面
 




 




 




，哪个页面是默认页面

window 项目的窗口

"backgroundTextStyle": "light", 背景文字:light|dark"navigationBarBackgroundColor": "#000", 导航栏背景颜色"navigationBarTitleText": "BLACK", 导航栏标题"navigationBarTextStyle": "white" 导航栏文字颜色:white|black

tabBar 底部栏的配置

"tabBar": { "color": "#484848", "selectedColor": "#109fef", "list": [{ "pagePath": "pages/base/base", "text": "语法", "iconPath": "/images/home.png", "selectedIconPath": "/images/home-h.png" }] },

color

文字默认颜色

selectedColor

文字选中颜色

list 页面列表：

        pagePath

页面地址

        text

文本

        iconPath

图标地址

        selectedIconPath 选中图标地址

2                 、页面.json

"usingComponents": {} 使用组件

"navigationBarTitleText": "基础语法" 标题

"enablePullDownRefresh": true 允许下拉刷新

"backgroundColor": "#eee" 背景颜色

"backgroundTextStyle": "dark" 背景文字颜色

五



     



     



     

、小程序内置组件

<view> 逻辑视觉分区(div)

<text> 文本(span)

user-select="true" 用户长按可选择

<image> 图片组件

src

图片地址

mode 模式： scaleToFill:不保持宽高比,缩放 aspectFit:保持宽高比,长边优先 aspectFill:保持宽高比,短边优先 widthFix:宽不变,高自动 heightFix:高不变,宽自动 left right top bottom center:显示局部

<input>

value 值

placeholder 提示文本

password="true" 密码框

type 弹出不同键盘：

text 文本输入键盘 number 数字输入键盘 idcard 身份证输入键盘 digit 带小数点的数字键盘 safe-password 密码安全输入键盘 指引 nickname 昵称输入键盘

confirm-type 键盘右下角案例

send 右下角按钮为“发送    
    
    
” search 右下角按钮为“搜索     


     


     


  ” next 右下角按钮为“下一个




 




 




 
” go 右下角按钮为“前往
   

   

   

” done  右下角按钮为“完成     

     

     

 ”

<button> 按钮

type 颜色类型

primary     绿色 default     白色 warn     红色

size="mini" 行内小按钮

<switch> 切换

color 颜色

type="checkbox" 选择框

<picker> 选择

header-text 标题文本

mode：

times 事件 date 日期 region 省市区

<icon> 图标

type：success, success_no_circle, info, warn, waiting, cancel, download, search, clear

size="100" 单位为px

<scroll-view> 滚动区域

scroll-x 水平

scroll-y 垂直

<swiper> <swiper-item> 幻灯片

indicator-dots="true"  是否显示提示点

autoplay="true" 自动播放

circular="true" 衔接滑动

六














、模板语法

条件渲染

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>

 注意：key值自动解构    
    
    
。eg：若想使用item.docid做为key   

   

   

 ，wx:key="docid"即可

<template> 模板 

定义:

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

导入：只能导入template

<import src="..."></import>

 使用：

<template is="user" data="{{name:mewow}}"></template>

<include> 引入

<include src="..."></include>

相当于把src的内容拷贝一份放在当前位置 

     

     

     ，不能导入template

七    
    
    
  、事件

事件方法

bindTap 点击

bindconfim 确认

bindchange 表单值发生变化

bindinput 表单输入

普通事件 

调用方法：

<button bindTap="showMsg">事件</button>

自定义方法：

showMsg(){}

事件传参

定义参数：

<button bindtap="showMsg" data-msg="小程序">小程序</button>

在方法中获取参数：

showMsg(e){ let msg=e.currentTarget.dataset.msg; wx.showToast({ title: hello +msg, icon:"loading" }) }

八


     


     


     
、表单双向绑定

 表单：

<input type="text" value="{{msg}}" bindinput="changeHd"/>

定义方法更新视图和data：

changeHd(e){ let msg=e.detail.value; this.setData({msg}) }

九
 




 




 




、data与更新

js方法里data数据：this.data.msg

在wxml使用：{{msg}}

更新data与视图：this.setData({key1:value1,key2:value2})

注意：this指向,在wx.xxx api里面this的wx这个对象不是当前页面

十   

   

   

 、微信api

Page参数

data 存储数据

onload() 当页面加载中

onPullDownRefresh 下拉刷新回调函数

onReachBottom 触底回调函数

wx.xxx

wx.stopPullDownRefresh();  停止下拉刷新

wx.showToast({})  轻提示

wx.request({url,method,success(){}}) 网络请求：

默认请求地址需要在后端配置 默认请求地址要求https