微信小程序入手须知

先注册，成功后保留你的Appid，并下载微信开发工具
要学会用微信开发文档
文档链接

效果图

app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/about",
    "news/news"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "基本配置",
    "navigationBarTextStyle": "white"
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#2e9b73",
    "backgroundColor": "#f5f5f5",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/tab3.png",
        "selectedIconPath": "images/tab7.png"
      },
      {
        "pagePath": "pages/about",
        "text": "新闻",
        "iconPath": "images/tab2.png",
        "selectedIconPath": "images/tab6.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "我的",
        "iconPath": "images/tab1.png",
        "selectedIconPath": "images/tab5.png"
      }
    ]
  },
  "style": "v2"
}

about.wxml

相当于HTML

<!-- html:div+ul+li+a+img+span
小程序：组件  view+text+image
 -->
 <!-- 导航 -->
 <navigator url='../news/news'>进入新闻详情页(保留当前页面）</navigator>
 <!-- open-type="redirect" 默认跳转 -->
 <navigator url='../news/news' open-type="redirect">进入日志详情页(关闭当前页面）</navigator>
 <!-- switchTab 跳转到tabBar页面，并关闭其他非tabBar页面 -->
 <!-- reLaunch 关闭所有应用，打开到应用内某个页面-->
 <!-- navigateBack -->
<!-- exit -->
<navigator open-type="exit" target="miniProgram">退出小程序</navigator>
 
 <!-- 视图容器 块级元素 类似div-->
 <view>好好学习</view>
 <!-- 滑块视图容器 轮播图 -->
 <swiper class='swiper' indicator-dots="true" indicator-color="#fff" autoplay="true">
 <swiper-item> <image src="../images/item1.jpg"></image></swiper-item>
 <swiper-item> <image src="../images/item2.jpg"></image></swiper-item>
 </swiper>
 <!-- scroll-view 可滚动视图区域 
 包含横向滚动区域：一行显示，不换行，溢出隐藏
 下面包含的组件 行块内
 -->
 <scroll-view class="navBar" scroll-x="true">
 <text>首页1</text>
 <text>首页2</text>
 <text>首页3</text>
 <text>首页4</text>
 <text>首页5</text>
 <text>首页6</text>
 <text>首页7</text>
 </scroll-view>
 <!-- 文本内容 行内元素 -->
 <text>行内元素</text>
 <!-- 进度条 -->
 <progress percent="20"></progress>
 <progress percent="40" show-info></progress>
 <progress percent="80" active></progress>
 <!-- 图标 -->
 <icon type="success"></icon>
 <icon type="success" size='30' color="pink"></icon>
 <icon type="success_no_circle"></icon>
 <!-- 按钮 -->
 <button size='mini'>按钮</button>
 <button type="primary">按钮</button>
 <button type="primary" disabled="true">按钮</button>
 <button type="primary" loading="true">按钮</button>
 <button type="primary" open-type="share">转发</button>
 <!-- input没有边框得自己加 -->
 <input type="text" placeholder="请输入内容"></input>
 <!-- 图片一定要写大小不然会变形 image -->
 

about.wxss

/*样式*/
.swiper{
  background:pink;
  height: 400rpx;
}
.swiper image{
  width: 100%;
  height:400rpx;
}
/* 滚动导航 */
.navBar{
  margin: 20rpx 0;
  background: #eee;
  padding: 10rpx;
  overflow: hidden;
  white-space: nowrap;
}
.navBar text{
  display: inline-block;
  margin: 0 20rpx;
}

news.wxml

<!--news/news.wxml-->
<text>news/news.wxml</text>

<!-- 跳转tabBar 关闭其他非rabBar -->
<navigator url='../pages/index/index' open-type="switchTab">点击跳转到首页tabBar</navigator>

<navigator url='../pages/logs/logs' open-type="reLaunch">进入新闻详情页(关闭当前页面,打开应用其他）</navigator>

<navigator open-type="navigateBack">返回</navigator>

后续待更新……

推荐你们看的网课链接很细很容易