从零开始学微信小程序

 刚刚用Vue+typescript将之前的项目重构完，又来新项目了，还是之前没有接触过的小程序，不会咱能咋滴，老大发话了，干就完了。还好听说小程序很简单（好歹有个心理安慰吧），因为是从零开始学，路过的大神们和朋友们，要是有哪里不对或者有更优雅的方式劳烦告知一声。

1、首先得有一个开发者账号，所以得先上微信公众平台注册一个小程序账号，通过这个账号你可以管理你的小程序：微信公众平台官网，按照官网教程一步一步走就对了，要是还整不明白，那就找度娘吧

2、然后可以顺带在官网下载一个微信开发者工具：微信小程序开发者工具下载页

3、看了官网文档，发现跟Vue的语法很像，这篇文章只是记录我怕自己以后忘掉的一些东西，不会详细说过程，毕竟每个业务场景不一样。

提示：在开始第一个你的第一个小程序，请认真填写名字、简介等资料，因为修改是有次数限制的，不要浪费机会，一个邮箱貌似就只能有一个线上的小程序，具体的得百度了，这点很重要

---

先上目录结构

app.json

目录中的app.json文件用来对微信小程序进行全局配置，详情可查看微信小程序文档

其他文件中的json文件则是进行页面配置的，如

{
  "navigationBarBackgroundColor": "#ffffff", // 导航条背景
  "navigationBarTextStyle": "black", // 导航文字颜色
  "navigationBarTitleText": "微信接口功能演示", // 页面标题
  "backgroundColor": "#eeeeee", // 当前页面背景颜色
  "backgroundTextStyle": "light" // 当前文字颜色
}

---

• 创建新页面

在app.json文件的pages中添加你要新增的页面，然后Ctrl+s保存就好，它会自动生成页面的，别傻兮兮的一个个文件手敲哈哈哈哈,

若想要当前页面就是你新创建的页面，不想每次都切来切去，那么在pages[0]上创建就好了，也就下面的  "pages/index/index" 前面创建新页面

"pages": [

     "pages/index/index",

     "pages/map/map",

     "pages/cart/cart",

     "pages/login/login",

]

 

---

• 骨架屏

骨架屏在很小程序以及一些商城类的APP中都能看到，在数据没有渲染完成的时候避免页面白屏，可以提升用户体验友好度。使用骨架屏有很多种方式，我知道的有：手写骨架屏、自动生成骨架屏、svg骨架屏、mpvue骨架屏、Vue骨架屏等，总的来说就是两种（利用工具与不利用工具），自己根据业务需要去决定使用哪种。

一、单独定制一套静态页面

也就是另外写一套布局一样的静态页面占位，利用js控制静态页面的显示隐藏。

这种方式适合内容多且长的页面，比如商品列表那种，只需要写用户可见的部分。缺点是，需要为每个页面单独定制，一旦布局修改，那么需要同时修改两个页面，增加维护成本。

二、自动生成（利用工具渲染页面）

我使用的是  skeleton 想要知道具体的用法可以点击上Git看

在Git上把项目下载下来后，将src文件目录下的component文件copy到你自己的项目中，

在要使用的页面中的 .json文件里引入骨架屏

// index.json
// 引入骨架屏组件
{
  "usingComponents": {
    "skeleton": "../../component/skeleton/skeleton"
  }
}

在 .js文件中初始化默认的数据，用于撑开页面结构，让骨架屏可以获取到整体的页面结构

// index.js
// 初始化默认的数据，用于撑开页面结构，让骨架屏可以获取到整体的页面结构
Page({
	data: {
		motto: 'Hello World',
		userInfo: {
			avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/SYiaiba5faeraYBoQCWdsBX4hSjFKiawzhIpnXjejDtjmiaFqMqhIlRBqR7IVdbKE51npeF6X1cXxtDQD2bzehgqMA/132',
			nickName: 'ja'
		},
		lists: [
			'aslkdnoakjbsnfkajbfk',
			'qwrwfhbfdvndgndghndeghsdfh',
			'qweqwtefhfhgmjfgjdfghaefdhsdfgdfh',
		],
		showSkeleton: true   //骨架屏显示隐藏
	},
	onLoad: function () {
		const that = this;
		setTimeout(() => {     //3S后隐藏骨架屏
			that.setData({
				showSkeleton: false
			})
		}, 3000)
	}
})

在index.wxml文件中引入骨架屏模板

<!--引入骨架屏模版 -->
<skeleton wx:if="{{showSkeleton}}"></skeleton>

<!--index.wxml-->
<!--给页面根节点class添加skeleton, 用于获取当前页面尺寸，没有的话就默认使用屏幕尺寸-->
<view class="container skeleton">
    <view class="userinfo">
        <block>
	        <!--skeleton-radius 绘制圆形-->
            <image class="userinfo-avatar skeleton-radius" src="{{userInfo.avatarUrl}}"
                   mode="cover"></image>
             <!--skeleton-rect 绘制矩形-->
            <text class="userinfo-nickname skeleton-rect">{{userInfo.nickName}}</text>
        </block>
    </view>
    <view style="margin: 20px 0">
        <view wx:for="{{lists}}" class="lists">
            <icon type="success" size="20" class="list skeleton-radius"/>
            <text class="skeleton-rect">{{item}}</text>
        </view>
    </view>

    <view class="usermotto">
        <text class="user-motto skeleton-rect">{{motto}}</text>
    </view>

    <view style="margin-top: 200px;">
        aaaaaaaaaaa
    </view>
</view>

使用及注意事项，直接贴图了，注意标红

• 路由跳转

路由跳转主要要注意 wx.switchTab, wx.redirectTo, wx.navigateTo 这三个之间的区别，第一个跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，后两个不能跳转到 tabBar 页面，所谓的tabBar页面不解释，看下图：

ps:如何生成tabbar？在app.json里面的TabBar中配置，举个栗子：

"tabBar": {

     "list": [

          {

             "pagePath": "pages/index/index",   // 路由

             "text": "主页", 

              "iconPath": "images/home.png", // 未选中是icon的路径

              "selectedIconPath": "/images/home_select.png" // 选中时icon的路径

           },

        ]

}

 

在.wxml文件中也可使用<navigator url="....."></navigator> 进行页面跳转，点击时会有一个灰色的背景，若是不想要，可以使用js控制路由跳转。

---

• 与后端交互

getProductList: function () {

     let that = this;

     wx.request({

          url: '......',

          success: function (res) {

               that.setData({

                    productList: res.data

              })

            } 

      })

},

防坑：

      跳转并刷新页面：需使用onshow来代替onload执行逻辑，onload只在首次打开页面时执行一次。如：B页面操作全局数据并跳转A页面，A页面onshow中获取全局数据更新视图

未完待续~~