微信小程序开发《一》

以你之姓@ 2021-09-19 10:04 485阅读 0赞

# 注册 #

[https://mp.weixin.qq.com/wxopen/waregister?action=step1][https_mp.weixin.qq.com_wxopen_waregister_action_step1]

选择 “个人”

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]

# 登录以后 ，查看自己的appid #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 1]

# 下载最新的开发工具，打开第一个小程序 #

[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19051021][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html_t_19051021]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 3]

# 代码说明： #

.json 后缀的 JSON 配置文件  
.wxml 后缀的 WXML 模板文件  
.wxss 后缀的 WXSS 样式文件  
.js 后缀的 JS 脚本逻辑文件

## 修改 index.wxml文件和index.js文件 ，有如下效果 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 4]

## index.wxml ##

<view class="container">
      <view class="userinfo">
        <button wx:if="{
       {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
        <block wx: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>
        <text class="user-motto">java9</text>
        <text class="user-motto">{
       {ttt}}</text>
        <button bindtap="clickMe">点击我</button>
      </view>
       
    </view>

## index.js ##

//index.js
    //获取应用实例
    const app = getApp()
    
    Page({
      data: {
        motto: 'Hello World******',
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      clickMe() {
        this.setData({ ttt: 'Hello 你点了我' })
      },
      //事件处理函数
      bindViewTap: function() {
        wx.navigateTo({
          url: '../logs/logs'
        })
      },
      onLoad: function () {
        if (app.globalData.userInfo) {
          this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
          })
        } else if (this.data.canIUse){
          // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
          // 所以此处加入 callback 以防止这种情况
          app.userInfoReadyCallback = res => {
            this.setData({
              userInfo: res.userInfo,
              hasUserInfo: true
            })
          }
        } else {
          // 在没有 open-type=getUserInfo 版本的兼容处理
          wx.getUserInfo({
            success: res => {
              app.globalData.userInfo = res.userInfo
              this.setData({
                userInfo: res.userInfo,
                hasUserInfo: true
              })
            }
          })
        }
      },
      getUserInfo: function(e) {
        console.log(e)
        app.globalData.userInfo = e.detail.userInfo
        this.setData({
          userInfo: e.detail.userInfo,
          hasUserInfo: true
        })
      }
    })

[https_mp.weixin.qq.com_wxopen_waregister_action_step1]: https://mp.weixin.qq.com/wxopen/waregister?action=step1
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70]: /images/20210726/d78ff8c23b1a4ad38749f3ed782c2da9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 1]: /images/20210726/98ef4c51103a4dfea9e724c594b86f57.png
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html_t_19051021]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19051021
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 2]: /images/20210726/e1648ad0639c4e10966a939676f8d7a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 3]: /images/20210726/c9f89a1793734a4682b1d11f63e50b63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2gzNTYzNjM_size_16_color_FFFFFF_t_70 4]: /images/20210726/482240e5f36f40f491e1f7e02015dcbf.png