微信小程序入门

最新推荐文章于 2024-08-27 14:14:49 发布

webxiaoliu

最新推荐文章于 2024-08-27 14:14:49 发布

阅读量439

点赞数

分类专栏： wx

本文链接：https://blog.youkuaiyun.com/qq_42789139/article/details/105324697

版权

wx 专栏收录该内容

1 篇文章

订阅专栏

1. 数组的遍历： wx:for

<view wx:for='{{data}}'> {{item.name}}</view>

2. 绑定点击事件

 <button bindtap="add">点击</button>
  <view>{{conter}}</view>  //通过点击事件修改conter的值

  add() {
    this.setData({
      conter: this.data.conter+= 1
    })
  }

微信小程序上修改的数据并不是像vue这样是响应式的，单纯修改数据后页面展示不会跟着修改，需要调用this.setData（）方法
编程范式
1.命令式编程：原生操作dom 比如jq 通过获取dom进行操作
2.声明式编程：Vue/React/Angular 等通过声明变量数据操作

3.小程序常用配置文件

3.1 project.config.json 项目配置文件，比如项目名称、appid等

3.2 sitemap.json 小程序搜索相关

3.3 app.json 全局配置

常用配置：
在这里插入图片描述
pages：页面路径配置：每增加一个页面需要在这里配置一个页面路径

{
  "pages": [
    "pages/index/index", //首页
    "pages/logs/logs"	//登录页    
  ]
}

window：全局默认窗口配置

{
"window": {
    "backgroundTextStyle": "light",   //下拉 loading （加载中圆点）的样式，仅支持 dark / light	
    "backgroundColor": "#000",	// 下拉加载模块的背景颜色
    "navigationBarBackgroundColor": "#333", //航栏背景颜色，如 #000000
    "navigationBarTitleText": "微新案例",  //导航栏标题文字内容
    "navigationBarTextStyle": "white"	 //导航栏标题颜色，仅支持 black / white
  },
}

tabBar：底部导航配置

"tabBar": {
    "list": [  // 数组list 数组范围 2-5 个 导航item
	    {
	      "pagePath": "pages/index/index",	// 页面路径
	      "text": "text",		// tab 上按钮文字
	      "iconPath": "iconPath", // 图片路径，小限制为 40kb，建议 81px * 81px，不支持网络图片。
	      "selectedIconPath": "selectedIconPath"  //选中时的图片路径
	    }
    ],
     "selectedColor": "#333",    //选中时的文字颜色
     "color": "#eee",			//未选中时的文字颜色
     "backgroundColor" :"#000",  //tabBar 背景颜色
     "borderStyle": "white"  //tabbar 上边框的颜色， 仅支持 black / white
  }

3.4 page.json 页面配置

page.json: 页面配置高于全局配置

{
  "navigationBarTitleText": "我是日志页面",  //单独设置标题
  "navigationBarBackgroundColor": "#555",	//单独设置导航样式
  "enablePullDownRefresh": true,	//开启下拉刷新功能
  "usingComponents": {}
}

4. 小程序页面渲染流程

在这里插入图片描述

小程序是双线程模型渲染：
a. 渲染wxml/wxcss 模型
b. 渲染js对象

在渲染层，宿主环境会把WXML转化成对应的JS对象；
将JS对象转成真实DOM树，交由渲染层线程渲染；
数据变化时，逻辑层提供最新的变化数据，生成新的JS对象通过diff算法与原来对象进行对比；将最新变化的内容反应到最真实的DOM树中，更新UI；

5.小程序声明周期

小程序启动流程
在这里插入图片描述
app.js 生命周期

/**
   * 生命周期回调——监听小程序初始化。
   */
  onLaunch : function (options) {
    // 数据请求
    // 获取用户信息
    wx.getUserInfo({
      success: function(res) {
        console.log(res);   
      }
    }) 
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function (options) {  // 只有在app.js 中才能获取场景值page.js 中无法
    console.log(options.scene);
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
  /**
   * 生命周期函数--监听错误信息
   */
  onError: function () {
    
  }

6. 获取用户信息

在这里插入代码片

方式一:

onLaunch: function () {
    wx.getUserInfo({
      success:function(res) {
        console.log(res); 
      }
    })
  }

方式二：点击获取授权按钮后获取用户信息

<button size="mini" open-type='getUserInfo' bindgetuserinfo='handleGetUserInfo'>获取授权</button>


  data: {
    
  },

  handleGetUserInfo: function(event) {
    console.log(event);
    
  },

方式三：利用组件 open-data（只能展示用户信息）

<open-data type='userNickName'></open-data>
<open-data type='userAvatarUrl'></open-data>

方式四：在app.js中自定义全局数据对象，page.js 中调用

  onError: function (msg) {
    
  },
  // 定义全局数据--app.js中
  globalData: {
    userName:'blueberrry',
    age: 18,
    height:180
  }

// 在page.js中引用
 // getApp()获取App()产生的示例对象
 const app = getApp()
 console.log(app.globalData);
 Page({
  //...
 })

page.js生命周期

注册一个page页面时我们一般需要做生命？

发送网络请求，从服务器获取数据（请求服务器数据成功回调时，要使用箭头函数的this，就近指向当前的page）
初始化数据，以便wxml引用
监听wxml中的事件，绑定对应的事件函数
其他一些监听，如页面滚动，上拉刷新，下拉加载等

微信小程序数据请求封装

新建network.js 文件配置：

// 导出 request() 方法
export default function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: options.url,
      method:options.method || 'get',
      data: options.data || {},
      success: resolve,  //resove 本身就是个回调函数
      fail: reject
    })
  })
}

// 在使用页面导入request() 方法
import request from '../../service/network'

// 调用request() 方法
request({
    url: 'http://123.207.32.32:8000/recommend'
   }).then(res=> {
     console.log(res);
   }).catch(error => {
     console.log(error);
   })