微信小程序基本使用流程-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序基本使用流程。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序小记

微信小程序官方文档

调接口

建议封装后使用，原生方法太繁琐

 // 1.原生方法调接口
    const _this=this
    wx.request({
      url: 'http://111.111.11.11:8888/top/id',
      data:{
        offset:0,
        limint:10
      },
      success:function(res){
        console.log(res)
        _this.setData({topMVs:res.data.data})   
      },
      fail:function(err){
        console.log(err)
      }
    })

添加页面

右键->新建Page->输入页面名称会自动生成四个文件

底部 tab

要在app.json中的pages中添加组件路径

在tarBar中的list中

pagePath(配置路径，在pages中要有！！！)

text(显示文字)

iconPat(当点击时它显示的图标)

selectedIconPath(点击后的图标)

组件与组件之间的跳转传值

1.子组件wxml传值：

 <video-item-v1 item="{{item}}"
                    bindtap="handleVideoItemClick"
                    data-item="{{item}}">
    </video-item-v1>

2.子组件js跳转：

  //封装跳转处理的方法
  handleVideoItemClick:function(event){
    //获取每个视频的id
    const id=event.currentTarget.dataset.item.id
    // 跳转
    wx.navigateTo({
      url: '/pages/detail-video/index?id='+id,
    })
  }

3.父组件js中拿到值：

  onLoad(options) {
    const id =options.id
    console.log(id)
  }

显示,移除loading

wx.showNavigationBarLoading() //显示
wx.hideNavigationBarLoading() //移除

下滑刷新

要在index.json添加

  "enablePullDownRefresh": true,	//添加刷新的代码
  "backgroundTextStyle": "dark",	//对着网页进行下拉刷新的时候的样式

删除时在index.js中

wx.stopPullDownRefresh()

富文本

rich-text富文本标签

修改标题栏标题

方法一

在index.json中

{
“navigationBarTitleText”: 标题栏
}

方法二

在Js文件中的 onLoad中

wx.setNavigationBarTitle({
    title: '标题栏'
});

内置

添加编译模式

编译模式可以方便我们的代码编写，可以一直去开发某个页面

微信小程序基本使用流程

代码注释

在js文件中

/**
 * 注释
 * @param {数据类型，例：number} id MVid 
 */

使用npm工具

1.创建新终端

2.输入 npm init -y 创建package.json文件

3.右上角->详情->本地设置->使用npm模块

4.左上角工具栏->工具->构建npm (每次安装完库都要构建一下)

5.使用时要在组件的json文件夹下的usingComponents中进行引入

6.将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

hy-event-store

一个基于事件的全局状态管理工具，可以在Vue、React、小程序等任何地方使用。

1.npm安装依赖

npm install hy-event-store

2、事件总线（event-bus）

const { HYEventBus } = require('hy-event-store')

const eventBus = new HYEventBus()

const whyCallback1 = (...payload) => {
  console.log("whyCallback1:", payload)
}

const whyCallback2 = (...payload) => {
  console.log("whyCallback1:", payload)
}

const lileiCallback1 = (...payload) => {
  console.log("lileiCallback1:", payload)
}

eventBus.on("why", whyCallback1)
eventBus.on("why", whyCallback2)
eventBus.on('lilei', lileiCallback1)
eventBus.once("why", (...payload) => {
  console.log("why once:", payload)
})

setTimeout(() => {
  eventBus.emit("why", "abc", "cba", "nba")
  eventBus.emit("lilei", "abc", "cba", "nba")
}, 1000);

setTimeout(() => {
  eventBus.off("why", whyCallback1)
  eventBus.off("lilei", lileiCallback1)
}, 2000);

setTimeout(() => {
  eventBus.emit("why")
  eventBus.emit("lilei")
}, 3000);

3、数据共享（event-store）

const { HYEventStore } = require("hy-event-store")
const axios = require('axios')

const eventStore = new HYEventStore({
  state: {
    name: "why",
    friends: ["abc", "cba", "nba"],
    banners: [],
    recommends: []
  },
  actions: {
    getHomeMultidata(ctx) {
      console.log(ctx)
      axios.get("http://123.207.32.32:8000/home/multidata").then(res => {
        const banner = res.data.data.banner
        const recommend = res.data.data.recommend
        // 赋值
        ctx.banners = banner
        ctx.recommends = recommend
      })
    }
  }
})

// 数据监听
eventStore.onState("name", (value) => {
  console.log("监听name:", value)
})

eventStore.onState("friends", (value) => {
  console.log("监听friends:", value)
})

eventStore.onState("banners", (value) => {
  console.log("监听banners:", value)
})

eventStore.onState("recommends", (value) => {
  console.log("监听recommends", value)
})

// 数据变化
setTimeout(() => {
  eventStore.setState("name", "lilei")
  eventStore.setState("friends", ["kobe", "james"])
}, 1000);

eventStore.dispatch("getHomeMultidata")