微信小程序项目基础知识

搭建项目

1. 创建新项目(需要一个appId)

2. 导入已有项目

3. 小程序配置

小程序知识体系目录

不同框架都会涉及到的九个方面:

1. 静态页面
2. 生命周期
3. 获取数据
4. 渲染页面
5. 绑定事件
6. 路由配置页面页面跳转
7. 页面传参
8. 组件
9. 存储(本地存储)
10. 其他（小程序特有）

一、小程序静态页面

1. 使用小程序组件,view相当于div,text相当与span
2. 使用rpx作为单位,这个屏幕的宽度为750rpx
3. page{} 该页面的最外层的容器
4. 底部tab配置 文档=>框架=>全局配置=>tabBar
5. 开放数据 文档=>组件=>开放能力=>open-data
6. 在小程序中使用vant-ui
7. 小程序中使用less

二、生命周期

• onReady／onLoad／onShow／onHide／onShareAppMessage／
• onShow和onLoad的区别
• vue的keep-alive

三、获取数据

1. 小程序只支持https

2. 需要配置域名白名单

3. 开发时可以取消域名校验 小程序右上角详情 =》 不校验合法域名

4. 全局变量const app = getApp();

5. 封装请求

   // 方式1
   function service(url, data,method) {
     method = method?method:'get';
   
     return new Promise((resolve, reject) => {
        wx.request({
          url,
          data,
          method,
          success(res){
            if (res.data.code === 666) {
              resolve(res.data);
            } else {
              reject(res.data.msg);
            }
          },
          fail(err) {
            reject(er);
          }
        })
     });
   }
   
   function get(url,data) {
     return service(url,data,'get');
   }
   
   function post(url,data) {
     return service(url, data, 'post');
   }
   
   export default {
     get,
     post
   };
   
   

   // 挂载到app.js, 以后使用不需要每次都导入
   //app.js
   
   import $http from './utils/request.js'
   
   App({
     onLaunch: function () {
       this.$get = $http.get;
       this.$post = $http.post;
   
     },
     globalData: {
       userInfo: null
     }
   })
   

四、渲染页面

1. data和setData
2. 插值表达式 {{}}
3. 列表渲染 wx:for 默认有item和index
4. 条件渲染 wx:if

五、事件绑定

1. bindtap或者bind:tap

2. 绑定的函数无法传参,需要data-xxx自定义属性,通过event.currentTarget.dataset.xxx
   event.target指向被点击的元素,event.currentTarget指向事件绑定的元素

   // wxml
   <view class="bd mt-10" wx:for="{{list}}" wx:key="{{index}}" bindtap="del" 
   data-productId="{{item.productId}}" data-index="{{index}}">
     <view>{{item.masterName}}</view>
   </view>
   

   // js
   del(event) {
    // productId需要小写
       let {index,productid} = event.currentTarget.dataset;
       console.log(index, productid);
   }
   

3. input没有双向绑定,可以通过事件实现数据同步

   • 单个输入框

   // wxml
   <view>
     <input value="{{username}}" bindinput="changeValue"></input>
   </view>
   

   // js
   changeValue(event) {
       this.setData({
            username: event.detail.value
    })
   },
   

   • 多个输入框使用同一个函数进行setData

   // wxml
   <view>
     <input value="{{username}}" bindinput="changeValue" data-name="username"></input>
   </view>
   <view>
     <input value="{{password}}" bindinput="changeValue" data-name="password"></input>
   </view>
   

   //  js 
   changeValue(event) {
       let name = event.currentTarget.dataset.name;
       let value = event.detail.value;
   
       this.setData({
           [name]: value
       })
   },
   

六、路由配置页面页面跳转

1. 通过navigator进行跳转
2. 通过wx.navigateTo进行跳转
   ps: 跳转有两种类型普通跳转和底部tab的跳转

七、页面传参

1. 通过url进行传参,比如: 列表页 /pages/cart/cart?id=sdfasdf23452342342
2. 详情页面通过options.id获取参数id的值
3. 如果要传递一个对象,需要先将对象转成json字符串,目标页面再把json字符串转成对像

组件

自定义一个小程序组件,父子组件通信

九、本地缓存

十、其他（小程序特有）

1. app.json全局配置
2. data和setData
3. 用户授权
   • 调用用户授权api
   • 授权类型
   • 检查用户是否已经授权
4. 获取输入框内容,没有双向绑定(跟react一样)
5. 开发工具
   • 原生小程序语法开发
   • 使用mpvue开发(vue语法)
   • 使用wepy开发(.wpy)
   • uni-app
   • 京东凹凸实验室taro
6. openId 用来识别用户
7. 小程序后台管理
   登陆微信公众,有以下几方面需要设置
   • AppId: wx1a4e63fdc266444b (登陆微信公众=>设置底部=>appid)
   • Secret Key: asdfasdfasdfasdfasdfasfdsadf(登陆微信公众=>开发=>开发设置)
   • 开发: 服务器域名(添加你访问的接口地址的ip,比如http://huruqing.cn)
     开发阶段可以先不设置: 开发者工具=>详情=>不校验合法域名
   • 成员管理: 添加项目开发成员,添加体验成员
   • 版本管理: 在开发者工具里上传=>体验版本=>提交审核=>正式版本