微信公众号开发

微信小程序开发(详解)-保证学的明明白白的

本文主要是介绍微信小程序开发(详解)-保证学的明明白白的,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

微信开发简介

1.微信开发概述

概述

(1)微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,用户通过简单的设置,就能生成微信网站。
(2)通俗的说,就是微信对外提供了例如聊天、支付、分享、收藏等功能,同时还提供了丰富的封装好的接口,开发者利用这些接口和功能,写入程序中,进行的开发。

目的

(1)企业开发的需要,使自己更加符合企业发展的需求
(2)个人的发展以及技能的提升
(3)发展前景大、生态系统丰富

平台

(1)微信开放平台
(2)微信公众平台

2.微信开放平台

概述

微信开放平台是微信对外提供微信开发接口的一个平台,这些开发出来的微信接口,供第三方的网站或App使用,使用户可将第三方程序的内容发布给好友或分享至朋友圈,第三方内容借助微信平台获得更广泛的传播。

平台地址:https://open.weixin.qq.com/

微信开放平台提供的能力

微信分享、 微信支付、 微信登录、微信收藏、微信分享等等

产品应用

(1)网站应用开发
(2)移动应用开发
(3)第三方平台开发
(4)公众帐号开发

只有通过 开发者资质认证后,才能使用开发平台提供的能力

3.微信公众平台 ***

mp.wqeixin.qq.com

3.1微信公众平台概述

为开发者提供资讯和服务的平台

3.2账号分类

1、服务号
2、订阅号
3、小程序
4、企业微信

4.开放平台和公众平台的区别

1.开放平台
	(1)微信对外开放接口的平台
	(2) 开放的接口,供其他网站及App使用
	(3)后端程序员是开放平台开发的主力军
2.公众平台
	(1) 基于微信公众号,为微信用户提供服务的平台
	(2) 所用公众号,都属于微信内开发
	(3)前端程序员是公众平台开发的主力军

三、认识小程序

1.小程序概述

小程序是一种新的开放能力,开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播,同时具有出色的使用体验。

微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

2.应用场景

适合轻量简单的开发
	快递类,商城类,餐饮类,教育。。。

3.亮点与不足

优点:
	1、不需要下载安装即可使用的应用
	2、自带流量(12亿微信用户都可以使用)
	3、开发难度低(html+css+js)
	4、开发成本低
缺点:
	1、代码大小默认只有2M
	2、不能直接分享到朋友圈

四、注册小程序账号

1.小程序账号注册流程

信息登记

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mldbeduT-1620906177905)(img/day01-1.png)]

填写管理员信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzLlaZKN-1620906177909)(img/day01-2.png)]

2.小程序信息完善

登陆之后,找到左侧设置,如下图:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iZBRUcwh-1620906177910)(img/day01-3.png)]

3、管理

版本管理:

​ 开发版

​ 体验版

​ 审核版

​ 线上版

成员管理

​ 管理员

​ 项目成员

​ 体验成员

4、开发设置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0q3f9HV-1620906177912)(img/day01-4.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8ceaxaC8-1620906177913)(img/day01-5.png)]

注意:域名必须是https协议,,域名必须被解析

五、微信开发者工具及工程创建

首先小程序开发不同于普通的网页开发,项目不能运行在浏览器中,所以无法查看编程效果以及调试,微信开发者工具提供了代码的编程能力,调试能力以及展示运行效果能力等强大的功能

1.工具下载安装

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.工程创建

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q5ay0ywu-1620906177914)(img/day01-6.png)]

3.工具常用功能使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uTGzf1fM-1620906177916)(img/day01-7.png)]


六、工程目录(重点)

1.初始化工程目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B0AVvEav-1620906177917)(img/day01-8.png)]

app.js    小程序的入口文件   类似于 vue里的main.js
app.json  全局配置文件
app.wxss  全局样式文件
project.config.json  项目关于编辑器的配置文件  
sitemap.json   站点地图(哪些页面能够被搜索到)
utils:     工具目录
pages:页面目录
	index目录
		index.wxml  页面结构 相当于html
		index.wxss  页面样式 相当于css
		index.js    页面逻辑
		index.json  页面的配置
	

  

2.小程序目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ll4QDdZ2-1620906177918)(img/day01-9.png)]

七、小程序配置

1.配置概述

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象,有以下属性:

2.全局配置app.json

 "entryPagePath": "pages/cart/cart",     设置默认启动页
  "pages": [                             创建页面(在pages里的页面,必须在注册注册)
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs",
    "pages/cart/cart"
  ],
    "window": {
    "navigationBarBackgroundColor": "#f00",   窗口背景颜色
    "navigationBarTitleText": "微信小程序",     标题内容
    "navigationBarTextStyle": "black",         标题的文字颜色
    "navigationStyle":"default",               是否自定义顶部window  dustum  自定义

    "backgroundColor":"#6699cc",               下拉时的背景颜色
    "enablePullDownRefresh":true,              开启下拉刷新
    "backgroundTextStyle":"light"              load的加载样式  dark  闪烁  light 不闪烁
  },
  
  tabber项至少两个,最多五个
    "tabBar": {
    "color": "#666",
    "selectedColor": "#f00",
    "backgroundColor":"#ff0",
    "borderStyle":"white",
    "custom":false,
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/img/index.png",
        "selectedIconPath": "/img/index_sel.png"
      },{
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "/img/cart.png",
        "selectedIconPath": "/img/cart_sel.png"
      },{
        "pagePath": "pages/list/list",
        "text": "列表", 
        "iconPath": "/img/my.png",
        "selectedIconPath": "/img/my_sel.png"
      }
    ]
  }

注意事项:

1、json文件里不允许注释

2、字符串使用的是双引号

3、 “pages/index/index” 在pages前不要添加任何字符 . ./ …/

4、在最后一项后边不要添加逗号

3.页面配置page.json

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象,有以下属性

注意:不需要指定window
{
   "navigationBarBackgroundColor":"#ff0",
   "navigationBarTitleText":"首页"
}

八、场景值

1.场景值概述

获取到进入小程序的途径/场景

2.使用场景

KFC
搜索小程序:进入到首页
到店,扫描桌子二维码,进入到点餐

3.获取场景值

App({
  // 监听小程序的初始化
  方式一、
  onLaunch(options){
    console.log(options)
    if(options.scene==1001){
      // 进入到首页
    }else{
      // 进入到点餐页面
    }
  },

	方式二、
  // 监听小程序显示或切前台
  onShow(options){
    console.log(options)
  },
  方式三、 api获取   也可以放到onLaunch
  onShow(){
   let scene = wx.getLaunchOptionsSync()
   console.log(scene)
  },
})

十、小程序逻辑层

1.逻辑层概述

小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。

在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:

增加 App 和 Page 方法,进行程序注册和页面注册。
增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
提供模块化能力,每个页面有独立的作用域。

注意:小程序框架的逻辑层并非运行在浏览器中,因此 JavaScript 在 web 中一些能力都无法使用,如 window,document 等。

2.小程序注册App()

App({

	onLaunch,onShow,onHide生命周期函数
  // 只执行一次
  onLaunch(){
    console.log("onLaunch-监听小程序初始化")
  },
  // 每次进入到这个小程序时都执行
  onShow(){
    console.log("onShow-监听小程序启动或切前台")
  },
  onHide(){
    console.log("onHide-监听小程序切后台")
  },
  one rror(err){
    console.log("onError-错误监听函数。",err)
  },
  onPageNotFound(){
    console.log("页面不存在")
    wx.switchTab({
      url: './pages/index/index',
    })
  }

 
})

2.1获取全局唯一应用实例

写在页面的js文件里即可
let app = getApp()
let {name,age} = app.userinfo
console.log(name,age)

3.页面注册Page()

Page({
	

  // 生命周期
  // 只加载一次,在onLoad里options 可以接收参数,注意:在tabber页面无法接参
  onl oad(options){
    console.log("onLoad-生命周期回调—监听页面加载")
  },
  // 每次进到当前页面都会加载
  onShow(){
    console.log("onShow-生命周期回调—监听页面显示")
  },
  onReady(){
    console.log("onReady-监听页面初次渲染完成")
  },
  onHide(){
    console.log("onHide-监听页面隐藏")
  },
  onUnload(){
    console.log("onUnload-监听页面卸载")
  },
  事件函数
    onPullDownRefresh(){
    // 监听用户下拉
    // 1、获取data里的变量
    console.log(this.data.msg)
    // 2、修改值
    // this.setData 可以更新页面
    this.setData({
      msg:"web1207"
    })

    // 也能修改成功,但是不能更新页面
    // this.data.msg = "web1207"
    // console.log(this.data.msg)

  },
    onReachBottom(){
    console.log("上拉触底")
    this.data.page++
    console.log(this.data.page)
    // 调用接口 页码传过去
        

  },
      
      
  // 转发给朋友
  onShareAppMessage(){

  },
  // 转发到朋友圈
  onShareTimeline(){

  },
  // any
  info:{
    name:"root",
    age:"18"
  },
  fn(){
    return "我是自定义函数111"
  }
  })
  
  A页面-B页面  经过了几个生命周期
  A onHide - B onl oad - B onShow - B onReady
  
  进入到一个小程序:
  		小程序onLaunch-小程序的onShow-页面的onLoad - 页面的onshow - 页面的onready
  离开一个小程序:
  		页面的onHide - 小程序的onHide

4.模块化

可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。es6也完全支持
// commonjs 暴露
module.exports = baseurl

module.exports = {
  baseurl,userinfo
}
//引入
// let baseurl = require("../../utils/config") 
let {baseurl,userinfo} = require("../../utils/config")
console.log(baseurl,userinfo)

// es6
export default baseurl
export default {baseurl,userinfo}

import aa from "../../utils/config"
console.log(aa.baseurl,aa.userinfo)


十一、基础语法

1.基础组件

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括 开始标签 和 结束标签,属性 用来修饰这个组件,内容 在两个标签之内。

所有组件都有以下属性:

属性名类型描述注解
idString组件的唯一标示保持整个页面唯一
classString组件的样式类在对应的 WXSS 中定义的样式类
styleString组件的内联样式可以动态设置的内联样式
hiddenBoolean组件是否显示所有组件默认显示
data-*Any自定义属性组件上触发的事件时,会发送给事件处理函数
bind* / catch*EventHandler组件的事件详见事件

特殊属性

<view >
  <view class="box"  
hover-class="active"
hover-start-time="0"
hover-stay-time="500"
>
  
</view>
</view>

<!-- 相当于span -->
<text user-select space="emsp" decode>
  相当于       span相当于span相当于span相当于span相当于span相当于span

  &lt;
</text>


<image src="/img/cart1.png" binderror="_binderror" lazy-load show-menu-by-longpress bindload="_bindload"></image>

2.数据渲染

基本数据绑定
	{{}} 语法
属性绑定
<!-- 
  属性绑定:
      vue   v-bind   :class=“box”
      小程序           class = "{{box}}"
 -->
<view class="{{box}}">
  首页
</view>
	
遍历

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

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


<view wx:for="{{goodsinfo}}"> 
  {{item.price}} --- {{item.goodsname}}
</view>
这篇关于微信小程序开发(详解)-保证学的明明白白的的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!