init

.eslintrc.js

@@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true
+  },
+  ecmaFeatures: {
+    modules: true
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true
+  },
+  // extends: 'eslint:recommended',
+  rules: {}
+};

.xhs-ide/settings.json

@@ -0,0 +1,5 @@
+{
+  "files.associations": {
+    "*.xhsml": "html"
+  }
+}

app.css

@@ -0,0 +1,14 @@
+
+    view{
+      box-sizing : border-box;
+    }
+    /**app.css**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

app.js

@@ -0,0 +1,16 @@
+// app.js
+App({
+  onLaunch() {
+
+    // 登录
+    xhs.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+        console.log('login', res)
+      }
+    });
+  },
+  globalData: {
+    userInfo: null
+  }
+});

app.json

@@ -0,0 +1,15 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/user/index"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "小红书小程序",
+    "navigationBarBackgroundColor": "#ffffff"
+  },
+  "style": "v2",
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents"
+}

pages/index/index.css

@@ -0,0 +1,62 @@
+/**index.css**/
+page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.scrollarea {
+  flex: 1;
+  overflow-y: hidden;
+}
+
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #aaa;
+  width: 80%;
+}
+
+.userinfo-avatar {
+  overflow: hidden;
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.usermotto {
+  margin-top: 200px;
+}
+
+.avatar-wrapper {
+  padding: 0;
+  width: 56px !important;
+  border-radius: 8px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.avatar {
+  display: block;
+  width: 56px;
+  height: 56px;
+}
+
+.nickname-wrapper {
+  display: flex;
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  border-top: .5px solid rgba(0, 0, 0, 0.1);
+  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
+  color: black;
+}
+
+.nickname-label {
+  width: 105px;
+}
+
+.nickname-input {
+  flex: 1;
+}

pages/index/index.js

@@ -0,0 +1,41 @@
+// index.js
+const defaultAvatarUrl =
+  "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
+Page({
+  data: {
+    motto: "Hello World",
+    userInfo: {
+      avatarUrl: defaultAvatarUrl,
+      nickName: "",
+    },
+    hasUserInfo: false,
+    canIUseGetUserProfile: xhs.canIUse("getUserProfile"),
+    canIUseNicknameComp: xhs.canIUse("input.type.nickname"),
+  },
+  bindViewTap() {},
+  onChooseAvatar(e) {
+    const { avatarUrl } = e.detail;
+    const { nickName } = this.data.userInfo;
+    this.setData({
+      "userInfo.avatarUrl": avatarUrl,
+      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
+    });
+  },
+  onInputChange(e) {
+    const nickName = e.detail.value;
+    const { avatarUrl } = this.data.userInfo;
+    this.setData({
+      "userInfo.nickName": nickName,
+      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
+    });
+  },
+  getUserProfile(e) {
+    console.log("user -profile", e);
+    // 推荐使用xhs.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    const userInfo = e.detail.userInfo;
+    this.setData({
+      userInfo: userInfo,
+      hasUserInfo: true,
+    });
+  },
+});

pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/index/index.xhsml

@@ -0,0 +1,27 @@
+<!--index.xhsml-->
+<scroll-view class="scrollarea" scroll-y type="list">
+  <view class="container">
+    <view class="userinfo">
+      <block xhs:if="{{canIUseNicknameComp && !hasUserInfo}}">
+        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
+        </button>
+        <view class="nickname-wrapper">
+          <text class="nickname-label">昵称</text>
+          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
+        </view>
+      </block>
+      <block xhs:elif="{{!hasUserInfo}}">
+        <button xhs:if="{{canIUseGetUserProfile}}" bindgetuserinfo="getUserProfile" open-type="getUserInfo"> 获取头像昵称 </button>
+        <view xhs:else> 请使用2.10.4及以上版本基础库 </view>
+      </block>
+      <block xhs:else>
+        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+      </block>
+    </view>
+    <view class="usermotto">
+      <text class="user-motto">{{motto}}</text>
+    </view>
+  </view>
+</scroll-view>

pages/user/index.js

@@ -0,0 +1 @@
+Page({})

pages/user/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/user/index.xhsml

@@ -0,0 +1,6 @@
+<scroll-view class="scrollarea" scroll-y type="list">
+
+sdfsdf
+  
+</scroll-view>
+  

project.config.json

@@ -0,0 +1,21 @@
+{
+  "compileType": "miniprogram",
+  "libVersion": "3.120.0",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "minified": true,
+    "urlCheck": true,
+    "useNewDevtools": false,
+    "useNewCompiler": true
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "auto",
+    "tabSize": 2
+  },
+  "appid": "68c47321131b9b0001166b7d",
+  "projectName": "jd-code-exchange"
+}

utils/util.js

@@ -0,0 +1,16 @@
+const formatTime = date => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  const hour = date.getHours();
+  const minute = date.getMinutes();
+  const second = date.getSeconds();
+  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`;
+};
+const formatNumber = n => {
+  n = n.toString();
+  return n[1] ? n : `0${n}`;
+};
+module.exports = {
+  formatTime
+};