微信小程序开发的入门基础知识点

最新推荐文章于 2023-07-10 10:44:26 发布

天主极乐大帝

最新推荐文章于 2023-07-10 10:44:26 发布

阅读量747

点赞数 2

分类专栏：微信小程序文章标签：微信小程序开发的入门基础知识点

本文链接：https://blog.csdn.net/weixin_42218868/article/details/99618286

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、小程序介绍_安装_使用
介绍小程序:
2017年1月9日，张小龙，腾讯。
支付宝现在也推出了小程序
无需安装，无需卸载，触手可及，用完即走
小程序基于微信，微信基于腾讯，腾讯有庞大的用户基数。
小程序的核心技术基于h5 ajax的web app
小程序的核心技术基于h5ajax的web app
开始开发:
https://mp.weixin.qq.com
1、注册账号
在这里插入图片描述

2、登录

3、添加开发者

4、下载开发工具

5、安装
6、新建项目，填写APPID
在这里插入图片描述
7、学会查看开发文档

8、微信小程序的结构

Index.js 脚本文件，负责加载数据，实现部分特效，里面有很多定义好的js方法和结构用来加载数据；
Index.json 配置文件，有很多关于页面的配置；
Index.wxml 前端页面，拥有独立的标签系统，和HTML神似；
Index.wxss 样式文件，和css一样。

微信小程序的前端样式，每个页面至少三个文件维护Js,wxml,wxss，但是也有全局配置，开发者可以根据开发需通过修改配置要进行样式的修改。

在这里插入图片描述
9、app.json配置
注意json文件不可以添加注释。
Window全局默认窗口用于设置小程序的状态栏、导航条、标题、窗口背景色。
配色网站：https://www.webdesignrankings.com/resources/lolcolors/
TabBar 底部导航栏
Color 文字颜色
backgroundColor 导航栏背景颜色
selectedColor 选择后字体颜色
List 导航内容列表，最少两个，最多五个
Text 导航文本
pagePath 导航连接，必须是在page参数之内的连接
iconPath 导航展示图标
selectedIconPath导航按下展示图标

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "天主极乐大帝",
    "navigationBarTextStyle": "white"
  },
  "tabBar":{
    "color":"#000000",
    "backgroundColor":"#00ff00",
    "selectedColor":"green",
    "list":[{
      "text":"首页",
      "pagePath":"pages/index/index",
      "iconPath":"/image/persion_select.png",
      "selectedIconPath":"/image/persion.png"
    },
      {
    "text": "列表页",
    "pagePath": "pages/list/list",
    "iconPath": "/image/persion_select.png",
    "selectedIconPath": "/image/persion.png"
      },
    {
      "text": "日志",
      "pagePath": "pages/logs/logs",
      "iconPath": "/image/persion_select.png",
      "selectedIconPath": "/image/persion.png"
    }]
  },
  "sitemapLocation": "sitemap.json"
}

10.app.js配置和app.json注释

//app.js
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    article_list:[
      {
        "picture":"/image/python1.jpg",
        "title":"python3天成大神",
        "description":"python是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。",
        "time":"1997-11-06"
      },
      {
        "picture": "/image/python2.jpg",
        "title": "python3周成大神",
        "description": "python是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。",
        "time": "1997-11-06"
      },
      {
        "picture": "/image/python3.jpg",
        "title": "python3月成大神",
        "description": "python是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。",
        "time": "1997-11-06"
      },
    ]
  }
})
/*{//app()必须在app.js中调用，必须调用且只能调用一次.不然会出现无法预期的后果
  "pages": [//app是全局配置
    "pages/index/index",
    "pages/logs/logs",
    "pages/list/list"
  ],
  "window": {//windows窗口
    "backgroundTextStyle": "light",
    //下拉loading的样式，仅支持dark深色的，黑暗的/light光亮的
    "navigationBarBackgroundColor": "#000",//导航栏背景颜色；navigation导航
    "navigationBarTitleText": "天主极乐大帝",//导航栏标题文件内容
    "navigationBarTextStyle": "white"//导航栏标题颜色
  },
  "tabBar":{//tabBar组件，类似下图的效果//页面底部
    "color":"#666666",
    "backgroundColor":"#000000",//底部背景颜色
    "selectedColor":"#E53A40",//被选中后的字体颜色
    "list":[{
      "text":"首页",
      "pagePath":"pages/index/index",
      "iconPath":"/image/persion_select.png",
      "selectedIconPath":"/image/persion.png"//被选中后的图片
    },
      {
    "text": "列表页",
    "pagePath": "pages/list/list",
    "iconPath": "/image/persion_select.png",
    "selectedIconPath": "/image/persion.png"
      },
    {
      "text": "日志",
      "pagePath": "pages/logs/logs",
      "iconPath": "/image/persion_select.png",
      "selectedIconPath": "/image/persion.png"
    }]
  },
  "sitemapLocation": "sitemap.json"
}//sitemap网站地图，location位置*/

11、index.wxml
Swiper轮播图特效插件
1、必须有swiper-item作为子标签
2、Autoplay自动播放，默认为false
3、Interval 轮播图切换时间，单位是毫秒
4、Vertical 垂直轮播上下而非左右，不写默认是左右
5、Circular（循环的，间接的）以平缓的方式过渡
小程序组件
View类似于html当中的div
Flex-direction:row;当前方法已经失效，需要用display:flex;来替代实现横向布局
Text文本类似与span标签
Image图片
Image是一个双标签
navigator超链接
URL就是跳转的路径
Open_type打开方式，默认navigate#导航
我们常用switchTab切换页面
reLaunch携带参数切换页面
Url在指向的时候，就是从根目录出发
Url在指向的时候，就是从根目录出发
icon图标

在其他的web开发过程当中，大部分的框架提供了后端渲染模板的方法。在小程序当中，不存在后端脚本，只能使用前后端分离技术。
在其他web开发过程中，大部分的框架提供了后端渲染模板的方法。在小程序当中，不存在后端脚本，只能使用前后端分离技术。

回忆之前的前后端分离技术：
在视图当中返回json数据，形成接口 restful
在前端部分使用ajax请求接口 ajax
将请求的数据渲染到前端页面上 vue

<!--index.wxml-->
<view >
    <swiper class="banner_border"  autoplay="true" interval="3000" circular="true">
    <!-- autoplay轮播图播放，默认·是false  interval轮播图播放间隔（毫秒） vertical垂直的，
    circular以平缓的方式过渡（循环的间接的）-->

        <swiper-item>
            <image class="banner" src="/image/python1.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image class="banner" src="/image/python2.jpg"></image>
        </swiper-item>
        <swiper-item>
            <image class="banner" src="/image/python3.jpg"></image>
        </swiper-item><!-- 仅可以放置在swiper容器中宽高自动设置为100% -->
    </swiper><!-- 滑块视图容器 -->
</view>
<view>
<swiper class="banner_border" autoplay="true"  interval="3000" circular="true" vertical="true">
  <!--autoplay轮播图播放，默认是false  interval 轮播图播放间隔（毫秒）  vertical垂直的
  circular 以平缓的方式过渡（循环的间接的）  -->
  <swiper-item>
  <image class="banner" src="/image/python1.jpg"></image>
  </swiper-item>
  <swiper-item>
  <image class="banner" src="/image/python2.jpg"></image>
  </swiper-item>
   <swiper-item>
  <image class="banner" src="/image/python3.jpg"></image>
  </swiper-item>
  </swiper>
</view>
<view>
  <view  wx:for="{{article_list}}"  wx:for-item="item"  class="content"  hover-class="content_hover">
    <!-- <view wx:for="{{article_list}}" wx:for-item="item"> -->
    <!-- </view> wx:for循环一个列表；wx:for-item=列表中的每个元素  article_list是index.js中的数据-->
    <!-- wx:for 循环一个列表；wx:for-item=列表中的每个元素 article_list是index.js中的数据 -->
    <view class="pic_box">
      <image src="{{item.picture}}"></image>
    </view>
    <view class="content_box">
      <view>
        <navigator class="title" open-type="reLaunch" url="pages/list/list?pages='{{index}}'">{{item.title}}</navigator>
    <!-- {{index}}得到该元素在列表中的下标  reLaunch重新发射，重新调转-->
    <!-- open-type需要被指定为reLaunch只有这个方法才允许会允许携带get参数进行跳转  open-type微信开放能力-->
      </view>
      <text class="description">{{item.description}}</text>
      <view class="time">{{motto}}{{item.time}}</view>
    </view>
  </view>
</view>

12、index.js和index.wxss配置

//index.js
//获取应用实例
const app = getApp()//实例化app

Page({
  data: {//局部变量来源于，当前页面的js文件中的page变量中的data变量
    motto: '天主极乐大帝亿岁',
    article_list:app.globalData.article_list
  },//得到app.js中的article_list数据//得到app.js中的article_list数据

  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  //页面加载完成$(function(){})
  onLoad: function () {
    //this.data.article=app.globalData.article_list
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

/**index.wxss**/
.{
  font-family: 微软雅黑；
}
.banner {
  width: 100%;
  height: 100%;
}
.content{
  width: 100%;
  height: 100px;
  display: flex;
  margin-top: 5px;
  background: #EFFFE9;
  border-bottom: 2px #EFFFE9 solid;
}

.content_hover{
  background-color: #EFFFE9;
}

.pic_box {
  width:30%;
  height: 100%;
}

.pic_box image{
  width:100;
  height: 100%;
}

.content_box{
  width:70%;
  height:100px;
  text-align: left;
  background:#EFFFE9;
}

.time{
  text-align: right;
}

天主极乐大帝

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
微信小程序开发的入门基础知识点

一、小程序介绍_安装_使用介绍小程序:2017年1月9日，张小龙，腾讯。支付宝现在也推出了小程序无需安装，无需卸载，触手可及，用完即走小程序基于微信，微信基于腾讯，腾讯有庞大的用户基数。小程序的核心技术基于h5 ajax的web app小程序的核心技术基于h5ajax的web app开始开发:https://mp.weixin.qq.com1、注册账号2、登录3、...
复制链接

扫一扫

专栏目录