详细安装微信小程序以及微信小程序基础(1)

starry__sty
本文介绍了详细安装微信小程序以及微信小程序基础(1)相关内容,对大家解决问题具有一定的参考价值,需要的朋友们一起学习吧!

1.小程序是什么?

微信小程序,简称小程序,是一种不需要下载安装就可以使用的应用;

2.为什么用小程序?

​ 2-1.微信有很多用户,在微信里开发产品更容易接触用户;

​ 2-2.推广app成本太高;

​ 2-3.开发的适配成本低;

​ 2-4.容易⼩规模试错,然后快速迭代。

​ 2-5.可以跨平台使用;

3.官网

3-1: 官网:https://mp.weixin.qq.com/

3-2:微信者开发工具:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=828501313&lang=zh_CN

3-3.下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=2018315

4.其他的小程序?

​ 4-1.支付宝小程序

​ 4-2.百度小程序

​ 4-3.QQ小程序

​ 4-4.今日头条+抖音小程序

5.小程序的环境准备?

​ 开发微信⼩程序之前,必须要准备好相应的环境;

​ 5-1:注册账户

​ 使用一个新的邮箱(没有注册过其他的小程序或者公众号)

在这里插入图片描述

5-2.获取APPId

​ 官网:https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=828501313&lang=zh_CN

​ 由于后期调⽤微信⼩程序的接⼝等功能,需要索取开发者的⼩程序中的APPID,可 登录,然后获取APPId;登录成功看到下面画面:

在这里插入图片描述 在这里插入图片描述

5-3.开发者工具

在这里插入图片描述

6.第一个微信小程序

​ 6-1.打开微信开发者⼯具

注意 第⼀次登录的时候需要扫码登录

在这里插入图片描述

6-2.新建⼩程序项⽬ 在这里插入图片描述

6-3填写项⽬信息 在这里插入图片描述

6-4.成功

在这里插入图片描述

7.微信开发者⼯具介绍?

详细使用,看官网:

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

在这里插入图片描述

8.⼩程序结构⽬录

小程序框架的目标是通过简单高效的方式让开发者在微信中开发具有原生app体验的服务;

8-1:⼩程序⽂件结构和传统web对⽐

在这里插入图片描述

从上看出传统是三层结构,微信小程序是四层,多了个.json;

8-2.基本项目目录

在这里插入图片描述

9.小程序配置文件

​ 他有两种配置文件,一种是全局的app.json ,一种是页面自己的page.json;

在这里插入图片描述

注意 :

​ 1.pages----用来描述文件的路径;

​ 2.window----定义窗口(顶部)背景颜色,文字颜色

​ 完整配置参考:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

9-1-1.tabbar

官网:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

9-1-2.页面配置 page.json

指的是为每个单独的页面设置背景颜色,文字等;

在这里插入图片描述

9-1-3.setmap配置

sitemap.json⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引;

配置官网:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html

10.模板语法

10-1.数据绑定

​ 10-1-1:普通写法

 <view>{{msg}}</view> 
Page({
    data:{
        msg:'哈哈哈哈'
    }
})

10-1-2:组件属性

 <view id='{{id}}'></view> 
Page({
    data:{
        id:'aa'
    }
})

10-1-3:布尔类型:

注意:不要直接写checked="false"`,计算结果为一个字符串;

<checkbox checked="{{false}}"> </checkbox>

10-2 .运算

12-2-1:算数

<view>{{10+1}}</view>       //11

10-2-2:字符串

<view>{{"10"+"1"}}</view>   //101

10-2-3:三元运算符

<view>{{100%2===0 ? "偶数" : "奇数"}}</view>   //偶数

注意花括号和引号之间如果有空格,将最终被解析成为字符串;

10-3.列表运算

​ 10-3-1:wx:for

​ 项的变量名默认为: item wx:for-item 可以指定数组当前元素的变量名

​ 下标变量名默认为: index wx:for-index 可以指定数组当前下标的变量名

wx:key : 唯一的值 用来提高数组渲染的性能;

wx:key 绑定的值有如下选择

​ 1.string 类型,表示循环项中的唯一属性:

list:[
      {
        id:0,
        name:'张三'
      },
      {
        id:1,
        name:'lisi'
      },
      {
        id:2,
        name:'王五'
      },
      {
        id:3,
        name:'赵六'
      }
    ]
wx:key='id'

2.保留字*this,它的意思是item本⾝,*this代表的必须是唯⼀的字符串和数组。

list:[1,2,3,4,5] 
 wx:key="*this"

代码:

<view wx:for='{{list}}'
  wx:for-item='item'
   wx:for-index='index'
   wx:key="id"
 >
  索引:{{index}}
  值:{{item.name}}
 </view>
Page({
    data:{
       list:[
      {
        id:0,
        name:'张三'
      },
      {
        id:1,
        name:'lisi'
      },
      {
        id:2,
        name:'王五'
      },
      {
        id:3,
        name:'赵六'
      }
    ] 
    }
})

10-3-2:block

​ 就是将view 换成block后,会少一层view 包裹,直接显示内容;

​ 作用:

​ 1.占位符的标签

​ 2.写代码的时候,可以看到这个标签的存在

​ 3.页面渲染时,小程序会把他删除

<view>
  <view>  对象循环</view>
  <block wx:for="{{person}}" 
  wx:for-item='value'
  wx:for-index='key'
  wx:key='age'
  class='my_list'>
    属性:{{key}}
    --
    值:{{value}}
  </block>
 </view>

10-4.条件渲染

​ 10-4.1:wx:if

​ 在框架中,使⽤wx:if="{{condition}}"来判断是否需要渲染该代码块:

<view>	
	<view>条件渲染</view>
    <view wx:if='{{true}}'>显示</view>
    <view wx:if='{{false}}'>隐藏</view>
    
     <view wx:if="{{false}}">1</view>
    <view wx:elif="{{false}}">2</view>
    <view wx:else="{{true}}">3</view>
</view>

​ 10.4-2: hidden

<view hidden>hidden</view>
<view hidden="{{false}}">hidden</view>

wx:if 和 hidden 的区别:

1.当标签不用频繁切换显示,优先使用 wx-if

直接把标签从页面中移除掉

2.当标签频繁切换的时候 优先使用 hidden

通过添加样式的方式来切换显示

hidden 属性 不要和display一起使用

总结:

  • 了解了微信小程序的强大功能;

  • 微信小程序里的很多语法和vue特别像;

  • 微信小程序让我又复习了vue知识,受益匪浅;

该文章版权属于starry__sty
摘录自:https://blog.csdn.net/starry__sty/article/details/118093222

这篇关于详细安装微信小程序以及微信小程序基础(1)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!