注册小程序

先去微信公众号腾讯客服申请微信小程序注册微信小程序,它会给你一个网址,如下图所示

按照这个指引,自行注册,有三步

1.帐号信息

2.邮箱激活

3.信息登记

这三步完成后依旧拥有自己的小程序了,在这个小程序管理平台，你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

登录小程序后台，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了,看到这个东西后先复制着等会儿还有大用。因为小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

有了小程序帐号之后，我们需要一个工具来开发小程序。就在你的开发管理下面有一个开发工具,前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装，有关开发者工具更详细的介绍可以查看《开发者工具介绍》 ,如果下不了也可以找我,我发给你。

接下来打开你下载好的东西,新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 "不使用云服务" （注意: 你要选择一个空的目录才可以创建项目），点击新建，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

点击新建后你就会得到这个页面,然后输入你自己的AppId,改为不适用云服务,选择你想使用的模板

点击确定后你就会可以进行操作啦

现在开始才刚刚入门

小程序给我们提供了4种文件类型,平常vscode分别是html,css,js,json,不过微信跟我们名字不一样.不过功能还是一样的

小程序的风格可以说和css不一样又有很多相同的

// index.js
// 获取应用实例,必须声明一个页面（Page）才能使用
Page({
  data:{
 
    // 声明一个属性
    mag:'nihao!'
  },
 
  // 事件的声明
  edit() {
 
    // 在事件中修改 data 中的属性
    // 只有加了setDate才能实时更新数据
    this.setData({
      // 修改
      mag:'hello'
    })
  }
})

而且也是用差值表达式来渲染

navigator 的使用

<button bind:tap="edit">点击更改</button>
// bind:tap="edit"   相当于    @click="edit"

<!-- 绝对地址 -->
<navigator  url="/pages/logs3/logs3">绝对地址跳转</navigator>
 
-----------------------------
 
<!-- 相对地址+taBar 页面 -->
<navigator open-type="switchTab" url="../logs/logs">相对地址</navigator>
-----------------------------
 
<!-- 跳转到其他小程序 -->
<navigator target="miniProgram" app-id="wx7696c66d2245d107">跳转蜜雪冰城</navigator>

app.json 相当于 main.js ,用来全局注册 js逻辑的文件

 
  // 用来注册页面的
  // 在此处配置后可以自动生成对应的文件夹
  // 排在第一位的是首页,如果你把logs和index调换位置,那么页面刷新后主页面就是logs
 
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}
 
====================================
 
<!-- url 是要跳转的页面，这个页面一定要在 app.json 中的 pages 下注册 -->
<navigator url="/pages/logs">跳转页面</navigator>


  //app.json
  // 小程序的头部标题部分
 
{
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#bfc",
    "navigationBarTitleText": "做人嘛，要开心",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  }
}

尺寸单位(rpx) rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

image 标签的使用

<!-- aspectFit 保证缩放比，显示长边，宽 -->

<image src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" mode="aspectFit"/>

<!-- aspectFit 保证缩放比，显示短边，高 -->

<image src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" mode="aspectFill"/>

<!-- aspectFit 不保证缩放比，拉伸填满 -->

<image src="https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF" mode="scaleToFill"/>

<!-- 自定义 -->
就在image里面加一个类名,自己定义样式

=======================================

轮播图

swiper：滑块容器。内只能写swiper-item。它的默认高度是150px；

swiper-item：滑块单元。它的大小是：宽度和高度为 100% * 100%；

// 轮播图

  <scroll-view refresher-enabled scroll-y  class="aside">
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
  </scroll-view>

  <view class="content">
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
  </view>
</view>

app.wxss 全局注册css样式，原理是在 page 上加样式

在 app.wxss 可以引入字体图标，然后全局使用

/* icon 阿里图标 */
 
@font-face {
  font-family: 'iconfont';  /* Project id 2604947 */
  src: url('//at.alicdn.com/t/c/font_2604947_pz035iibwdk.woff2?t=1677898721975') format('woff2'),
       url('//at.alicdn.com/t/c/font_2604947_pz035iibwdk.woff?t=1677898721975') format('woff'),
       url('//at.alicdn.com/t/c/font_2604947_pz035iibwdk.ttf?t=1677898721975') format('truetype');
}
 
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
 
/* 一个放大镜 */
.icon-sousuo:before {
  content: "\e602";
}

在元素中的使用

<!-- 搜索框 -->
<view class="search-bar">
  <input type="text" placeholder="输入搜索关键字"  />
  <text class="iconfont icon-sousuo"></text>
</view>

今天就讲到这吧,咱们下期见,觉得还可以点个赞吧,觉得不好也可以提出意见,博主会慢慢改进的,拜拜

微信小程序注册到入门级教学

注册小程序

navigator 的使用

image 标签的使用

轮播图