微信小程序开发基础详解

基础结构，生命周期，wx语法，模块引入，模块引入，事件，属性类型，自定义组件，组建通信，wxs模块，网络请求

1、结构

util.js 　　工具类
app.js 全局工具函数
app.json 小程序配置
app.wxss 全局样式

2、生命周期

onLoad(options) 页面加载时触发，可获取路径中的参数(1)
onReady() 页面渲染完成(1)
onShow() 页面显示/切入前台触发(N)
onHide() 页面隐藏/切入后台时触发(N)
onPullDownRefresh() 监听用户下拉动作，此事件需要在app.json文件中window节点中”开启全局的下拉刷新”enablePullDownRefresh”:true,才能触发它
onReachBottom() 上拉触底事件，需要当前页内容超过一屏幕
onPageScroll() 滚动事件
onShareAppMessage() 自定义分享
onUnload() 页面写在

3、wx语法

循环

wx:for=”{{}}”
wx:key=”{{}}” 可以不写写了节约性能
wx:for-index=”key” 不写默认 index
wx:for-item=”val” 不写默认item

条件判断

wx:if=”{{}}”
wx:elif=”{{}}”
wx:else

4、模块引入

import 方法

定义模块

<template name=\'\'> 内容{{}} </template>

template 可以定义多个

使用

 <import src=\'../\' />
 <template is=\'name\' data=\'{{title:"sd"}}\'/>

is 模块名称

data 数据

include 方法

template 不生效

5、设置数据 this.setData({})

6、事件

bind 冒泡

catch 非冒泡

常见事件：tap touch相关

写法：bind:tap=\’click\’

7、事件对象

type 　　类型

timeStamp 时间

target 　　属性值

currentTarget 属性值

8、属性类型

Boolean Number String Array Object EventHandler(事件处理函数名)

9、共同属性

id class style hidden(隐藏) data-*(自定义属性) bind*/catch*

10、自定义组件

1- 新加组件(工具新加component)

2- 需要引入组件的页面配置文件 json中定义 name path，

 {
      "usingComponents": {
          // 在父模板中调用的标签名    组件的路径
          "com-name": "path/to/the/custom/component"
       }
  }

3- 页面中调用组件

<com-name>

11、组建通信

父级-子集

原理：类似于vue 自定义属性–properties接收

父级 <com-name name=\’测试\’>

子集js文件

properties:{ name:{

type:String,

optionalTypes:[String,Number]

value:\’123\’

}}

子集-父级

原理：类似于vue 自定义事件并（triggerEvent）传递—evt.detail

子集：

sonClick(evt){

let name=evt.target.dataset.name

this.triggerEvent(\’getName\’,{name},false)

}

父级:

<com-name bind:getName=\’click\’/>

click(evt){

let name=evt.detail

}

12、wxs模块

写法与js类似，不知此ES6

tools.wxs

 function mysub(str,len){
      return ...
 }
 module.exports={
     mysub:mysub
 }

引入与使用

 <wxs src=\'../../tools.wxs\' module=\'tools\'/>
 <view>tools.mysub(\'hfghaf\')</view>

13、网络请求

1-设置请求超时时间

app.json

 "networkTimeout":{
       "request":10000
  }

2-请求

http.js

  const http = ({url,data={},method=\'Get\',header={}})=>{
                wx.showLoading({
                    title:\'加载中\'
                })
                return new Promise((resolve,reject)=>{
                    wx.request({
                        url,
                        method,
                        success:res=>{
                            resolve(res)
                        },
                        fail:()=>{
                            reject(\'fail\')
                        },
                        complete:()=>{
                            wx.hideLoading()
                        }
                    })
                })
            }

3-配置请求地址

config uri.js

  const host = \'http://localhost/api/v1\'
       export default {
          new:\'${host}/news\'
       }

4-请求模型

  models newsModels.js

  
            import http from \'../utils/http\'
            import config from \'../config/uri\'
            // 获取新闻列表
            export const getNew=(page=1)=>{
                return http({
                    url:config.news
                })
            }

5-调用

      import {getNews} from \'../../models/newsModel\'
        getNews().then(res=>{
            this.setData({
                news:res.data
            })
        })

14、缓存

没有过期时间，单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

        class Cache {
            /* 
                1、设置缓存
                    单位毫秒
            */
            set(key, value, expire = 36000) {
                expire = Date.now() + expire * 1000
                //原有的数据改成对象，加上缓存时间
                let data = { expire, value }
                wx.setStorage({
                    key,
                    data,

                });
            }
            /*
            2、获取缓存 
            */
            get(key) {
                if (this.has(key)) {
                    return \'\'
                }
                return wx.getStorage(key).value
            }
            /* 
                3、清理缓存
            */
            remove(key) {
                wx.removeStorage({
                    key: key
                });
            }
        }

本文链接：https://www.cnblogs.com/ypSharing/p/14528372.html